Jquery Ui Tabs - How to Get Currently Selected Tab Index

jQuery UI Tabs - How to Get Currently Selected Tab Index

For JQuery UI versions before 1.9: ui.index from the event is what you want.

For JQuery UI 1.9 or later: see the answer by Giorgio Luparia, below.

How to get currently selected tab index in jquery UI?

You need to use it this way. ui does not have any property called index

alert(ui.newTab.index());

Demo

Get the index of currently selected tab: ui.newTab.index()
Get the index of last selected tab: ui.oldTab.index()

ui.newTab will return you the jquery object representing the element and you can invoke the index() method on it to get the index.

jQuery UI tabs: get current tab index

$('#tabs').tabs({
    select: function(event, ui) { // select event
        $(ui.tab); // the tab selected
        ui.index; // zero-based index
    },
    show: function(event, ui) { // show event
        $(ui.tab); // the tab shown
        ui.index; // zero-based index
    }
});

Demo

Or, if you don't want to bind the event listeners on the initialization you can bind them like this:

$('#tabs')
    .bind('tabsselect', function(event, ui) { // select event
        $(ui.tab); // the tab selected
        ui.index; // zero-based index
    })
    bind('tabsshow'. function(event, ui) { // show event
        $(ui.tab); // the tab shown
        ui.index; // zero-based index
    });

get the current tab in jQuery UI tabs

According to manual http://api.jqueryui.com/tabs/ getter of active JqueryUI tab is

var active = $( ".selector" ).tabs( "option", "active" );

*Replace ".selector" by your one.

Then active.attr( 'id' ) will return exactly what you need.

Get Index of Activated Tab

You could use the following approach http://jsfiddle.net/9ChL5/1/:

$("#tabs").tabs({
    activate: function (event, ui) {

        console.log(ui.newTab.index());
    }
});

jQuery tabs - getting newly selected index

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.

How to get TabIndex for the current selected tab?

From the docs:

var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0

EDIT

I copied your file, and made the following changes:

Change the reload link to look like this:
href="#" id="reload"

(markdown keeps converting my anchor tag to a link)

Change the jquery to this:

       
$(function() {
    $('#tabContainer').tabs({ selected: 0 });
    $('#fragment-1').tabs({ selected: 0 });
    $('#reload').click(function(){
        var $tabs = $('#fragment-1').tabs();
        reloadTab($tabs.tabs('option', 'selected'));
    });
});

function reloadTab(tabindex) {
        //alert(tabindex); //un-comment for proof.
    var smalltabs = $('#fragment-1').tabs({cache:false, spinner:'',selected:0});
    $('#tabContainer').tabs('load', smalltabs.tabs('option','selected'));
    $('#fragment-1').tabs('load', tabindex);
}

jQuery tabs - Get the index of previously selected tab

By the time the select or show callbacks fire you can only get the currently selected tag, by using ui.index. Your best bet is to just track that index and update it upon tab switching, which will tell you the previous index before said updating.

var previousIndex = 0;
$('#tabs').tabs(  {
    select: function(e, ui) {
        //do whatever you need to do with previousIndex
        alert("The previously selected tab index was " + previousIndex);
        //track the new index
        previousIndex = ui.index;
    } 
});

Jquery Ui Tabs - How to Get Currently Selected Tab Index