Follow the links of the tab in jquery ui tab

Question

I have jquery tabs like

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="http://www.google.com/">Name 3</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>

the first two tabs load the respective divs. But the third one should go to google.com, instead it does nothing. It just adds http://example.com/index.html#ui-tabs-[object Object] to the url.

I am developing a wordpress plugin and the admin page needs a tab interface. I tested this in a local server and not working

update:

i don't want to load google.com inside the page. It should open the webpage in new tab/window like ordinary links do.

Answer 1

I'm not sure what you want it to do, but if it should open the link as a new page/replacement for the current page, the documentation explains:

[How to...] ...follow a tab's URL instead of loading its content via ajax

Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).

$('#example').tabs({
    select: function(event, ui) {
        var url = $.data(ui.tab, 'load.tabs');
        if( url ) {
            location.href = url;
            return false;
        }
        return true;
    } });

See http://jqueryui.com/demos/tabs/#...follow_a_tab.27s_URL_instead_of_loading_its_content_via_ajax

Note: In JQuery > 1.9.0 use activate instead of select

Answer 2

You cannot since requesting content from google.com will be a cross domain call and the xhr call will fail.

Why not put an iframe inside the third content div with the src attribute pointing to google?

Demo here

<ul id="tabsList">
    <li><a href="#tab-1">Name 1</a></li>
    <li><a href="#tab-2">Name 2</a></li>
    <li><a href="#tab-3">Google Tab</a></li>
</ul>

<div id="tab-1">content 1</div>
<div id="tab-2">content 2</div>
<div id="tab-3">
    <iframe src="http://www.google.com"></iframe>
</div>

Answer 3

I just had the same problem. I solved it by giving the tab anchor that should be loaded externally a class named "followtablink". Then I modified my tabs() call to this:

$('.tabs').tabs({
select: function(event, ui) {
    var url = $.data(ui.tab, 'load.tabs');
    var className = ui.tab.className;

    if( className == "followtablink" ) {
        location.href = url;
        return false;
    }
    return true;
}});

Every time a tab gets selected, it follows the link when it encounters the given class.

Note: In JQuery > 1.9.0 use activate instead of select

Answer 4

When i saw the generated source code, the

<li><a href="http://www.google.com/">Name 3</a></li>

was changed to

<li><a href="#ui-tabs-[object Object]">Name 3</a></li>

But other lists were same. I still don't know whether it is due to the problem of testing in local server.

So i tried this option. I removed the "href" attribute and added a class named "theLink" like

<li><a class="theLink" target="_blank">Name 3</a></li>

and then i added the following jquery

$('.theLink).attr('href', 'http://www.google.com');

after this it worked as i excepted. The third tab when clicked loaded google.com in a new tab