jQuery tabs - getting newly selected index

Question

I've previously used jquery-ui tabs extension to load page fragments via ajax, and to conceal or reveal hidden divs within a page. Both of these methods are well documented, and I've had no problems there.

Now, however, I want to do something different with tabs. When the user selects a tab, it should reload the page entirely - the reason for this is that the contents of each tabbed section are somewhat expensive to render, so I don't want to just send them all at once and use the normal method of toggling 'display:none' to reveal them.

My plan is to intercept the tabs' select event, and have that function reload the page with by manipulating document.location.

How, in the select handler, can I get the newly selected tab index and the html LI object it corresponds to?

$('#edit_tabs').tabs(  {         selected: 2,     // which tab to start on when page loads         select: function(e, ui) {             var t = $(e.target);             // alert("data is " +  t.data('load.tabs'));  // undef             // alert("data is " +  ui.data('load.tabs'));  // undef              // This gives a numeric index...             alert( "selected is " + t.data('selected.tabs') )             // ... but it's the index of the PREVIOUSLY selected tab, not the             // one the user is now choosing.               return true;              // eventual goal is:              // ... document.location= extract-url-from(something); return false;         } }); 

Is there an attribute of the event or ui object that I can read that will give the index, id, or object of the newly selected tab or the anchor tag within it?

Or is there a better way altogether to use tabs to reload the entire page?

Answer 1

I would take a look at the events for Tabs. The following is taken from the jQuery docs:

 $('.ui-tabs-nav').bind('tabsselect', function(event, ui) {      ui.options // options used to intialize this widget      ui.tab // anchor element of the selected (clicked) tab      ui.panel // element, that contains the contents of the selected (clicked) tab      ui.index // zero-based index of the selected (clicked) tab  }); 

Looks like ui.tab is the way to go.

Answer 2

in jQuery UI - v1.9.2

ui.newTab.index() 

to get a base 0 index of active tab