jQuery UI Tabs Get Currently Selected Tab Index

Question

I know this specific question has been asked before, but I am not getting any results using the bind() event on the jQuery UI Tabs plugin. I just need the index of the newly selected tab to perform an action when the tab is clicked. Bind() allows me to hook into the select event, but my usual method of getting the currently selected tab does not work. It returns the previously selected tab index, not the new one:

var selectedTab = $("#TabList").tabs().data("selected.tabs");

Here is the code I am attempting to use to get the currently selected tab:

$("#TabList").bind("tabsselect", function(event, ui) {

});

When I use this code, the ui object comes back undefined. From the documentation, this should be the object I'm using to hook into the newly selected index using ui.tab. I have tried this on the initial tabs() call and also on its own. Am I doing something wrong here?

Answer 1

I have created a demo for you online so you can compare it with what you are doing, hopefully it will highlight what you need to change. If not can you try to re-create your issue at the same site and I will look into it.

edit: in short: ui.index from the event is what you want.

Answer 2

When are you trying to access the ui object? ui will be undefined if you try to access it outside of the bind event. Also, if this line

var selectedTab = $("#TabList").tabs().data("selected.tabs");

is ran in the event like this:

$("#TabList").bind("tabsselect", function(event, ui) {
  var selectedTab = $("#TabList").tabs().data("selected.tabs");
});

selectedTab will equal the current tab at that point in time (the "previous" one.) This is because the "tabsselect" event is called before the clicked tab becomes the current tab. If you still want to do it this way, using "tabsshow" instead will result in selectedTab equaling the clicked tab.

However, that seems over-complex if all you want is the index. ui.index from within the event or $("#TabList").tabs().data("selected.tabs") outside of the event should be all that you need.

Answer 3

Wish the link still worked as I am having the same problem and can't see your solution :(

Answer 4

function getSelectedTabIndex() { 
    return $tabs.tabs('option', 'selected');
}