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

Answer 3

select: function(e, ui){var index=ui.index;}

works well for me. see: http://api.jqueryui.com/tabs/#events

Answer 4

thanks, jobscry - the 'ui.tab' you pointed out gave me the clicked anchor tag, from which I can extract its class, id, href, etc... I choose to use the id to encode my url. My final tabs() call looks like this:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            // it has an id of "link_foo_bar"
            // transform it into http://....something&cmd=foo-bar
            var url = idToTabURL(ui.tab.id);

            document.location = url;
            return false;
        }
    }).show();
});

Answer 5

Or another option I have used for my website is this. Its a basic UL/Div Tab Navigation System. The key to firing the correct tab upon clicking a link to another page with a hash mark attached, is by simply filtering through your UL for the #example that matches whats being passed through the browser. Its like so.

Here is the example HTML :

    <div id="tabNav">

  <ul class="tabs">
    <li><a href="#message">Send a message</a></li>
    <li><a href="#shareFile">Share a file</a></li>
    <li><a href="#arrange">Arrange a meetup</a></li>
  </ul>
</div>

<div id="tabCont">

  <div id="message">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div id="shareFile">
    <p>Sed do eiusmod tempor incididunt.</p>
  </div>
  <div id="arrange">
    <p>Ut enim ad minim veniam</p>
  </div>

</div>

And the Jquery to make it happen :

$(document).ready(function() {
$(function () {
    var tabs = [];
    var tabContainers = [];

    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();


        // set up the selected class
        $(tabs).removeClass('active');
        $(this).addClass('active');

        return false;

});




 $(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();

  });

});

That should take care of it for you. I knwo this isn't the cleanest code, but it'll get ya there.

Answer 6

in my implementation it works like:

$(document).ready(function() {
    $('#edit_tabs').tabs(  {
        selected: [% page.selected_tab ? page.selected_tab : 0 %],
        select: function(e, ui) {
            // ui.tab is an 'a' object
            var url = ui.tab.href;

            document.location = url;
            return false;
        }
    }).show();
});

Answer 7

I did find out two ways to to accomplish this requirement, as it's tough for me to put code here, you can have a look at it on http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html

Hope that helps someone..

Answer 8

A quick look into the documentation gives us the solution:

$('#edit_tabs').tabs({ selected: 2 }); 

The above statement will activate the third tab.