Select tab by name in jquery UI 1.10.0

Question

Before jquery UI 1.10.0 I used to indirectly select a tab like this:

$("#tabs").tabs( "select", 5 );

or

$("#tabs").tabs( "select", "tab6" );

Now, with the same code, using jquery UI 1.10.0 , you get an error saying that there is "no such method 'select' for tabs widget instance".

I changed the code to use the "option" "active" like this:

$("#tabs").tabs( "option","active", 5 );

However, it looks like I can use only the index. Selecting by ID is not working anymore. So, instead of using the ID like this (which is not working) :

$("#tabs").tabs( "option","active", "tab6" );

you have to do it like this:

var idx = $('#tabs a[href="#tab6"]').parent().index();
$("#tabs").tabs( "option", "active", idx );

or, in a shorter form

$("#tabs").tabs( "option", "active", $("#tab6").parent().index() );

I read the "changelog" (http://jqueryui.com/changelog/1.10.0/) and I don't see anything about this change.

Is there another way of selecting a tab by name in jquery UI 1.10.0 ?

I created a demo here for whoever wants to try...

http://jsbin.com/ojufej/1

Solution 1

I ended up using this (see example):

http://jsfiddle.net/AzSUS/

Basically, I added these functions

$.fn.tabIndex = function () {
    return $(this).parent().find(this).index() - 1; 
};
$.fn.selectTabByID = function (tabID) {
    $(this).tabs("option", "active", $('#' + tabID).tabIndex());
};
$.fn.selectTabByIndex = function (tabIndex) {
    $(this).tabs("option", "active", tabIndex);
};

Ans use them like this:

$("#tabs").selectTabByIndex(0);

$("#tabs").selectTabByID('tab2');

As you'll see in the HTML section on my example ...

<div id="tabs">
  <ul>
    <li><a href="#tab1">[0] #tab1</a></li>
    <li><a href="#tab2">[1] #tab2</a></li>
    <li><a href="#tab3">[2] #tab3</a></li>
    <li><a href="#tab4">[3] #tab4</a></li>
  </ul> 
  <div id="tab1">Tab 1 Content</div>
  <div id="tab2">Tab 2 Content</div>
  <div id="tab3">Tab 3 Content</div>
  <div id="tab4">Tab 4 Content</div>
</div>

... I have a very simple, well defined structure for the tabs.

The "real" application contains 3 levels of tabs

See this example with 2 levels:

http://jsfiddle.net/vgaTP/

Another thing that I wasn't clear about is this: I do not want to trigger the "click" on the tab, I just want to "switch" to that tab, without click. For me, the "click" event loads the content of a tab and I do not want to load the content every time I "select" a tab.

Solution 2

jQuery deprecated the select method in v.1.9

The select method has been deprecated in favor of just updating the active option. You should replace all calls to the select method with calls to the option method to change the active option.

---

In v.1.10 they completely removed it:

Removed: select method. (#7156, 7cf2719)

---

The closest I could get to selecting a tab by name was using the href attribute selector and the trigger method.

$( "[href='#tab6']").trigger( "click" );

Demo: http://jsfiddle.net/QRUGM/

---

The original select method did something similar:

this.anchors.eq( index ).trigger( this.options.event + this.eventNamespace );

Only they selected the tab by the index instead of the name.

Solution 3

If you already have a large amount of legacy code referencing these depreciated functions, and migrating is a headache, create a backwards compatibility module that bridges the old/new methods.

$.extend(true, $.ui.tabs.prototype, {
    select: function (indexOrId) {
        if (typeof indexOrId == "integer")
            this.option("select", indexOrId);
        else
            $("[href='#"+ indexOrId +"']", this.element).click();
    }
    // other methods..
});

Solution 4

Really easy;

$("#tabs").tabs("option", "active", $("#tabs").find("#tab6").index()-1 );

Where #tab6 is the ID of the tab you want to select and #tabs is the ID of your tab control.

View more solutions

Comments

[BLSully]

+1 This was one of the more irritating changes in 1.10

[leoinfo]

I do not want to "click" on the tab, I just want to "select" the tab

[Stumblor]

So just integrate your index/id conversion code into that second part. The point is that you can override the prototype so that your existing code doesn't have to change, meaning you can still call: $("#tabs").tabs( "select", "tab6" );

[adamj]

This worked so much better then all of the methods in this thread. Thank you above and beyond this issue was driving me insane.