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

Answer 1

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.

Answer 2

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.