Get Index of Activated Tab

Question

I'm upgrading code from jQuery UI 1.8 to 1.10.

Under 1.8, the event triggered when the tab changes was select, and I could access the index of the tab being selected through ui.index.

Under 1.10, the event triggered when the tab changes is activate. However, I cannot find anything in the event parameter ui that tells me the index of the newly activated tab.

How can I discover that index?

Eba

Answer 1

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

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

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

Mckeever

Was just curious if there was documentation on the JQuery UI site for .index() or any of the other properties available. I saw that the ui object had newTab/oldTab/newPanel/oldPanel as mentioned in this answer. But I didn't see further detail as to the existence of other properties, at least on that page. – Vitalize

@Vitalize ui.newTab is a regular jQuery object here and index() is jQuery's index() (indicated by "Type: jQuery" in the activate event docs). – Starkey

Answer 2

The UI object is still here but seems to hold directly the jQuery objects of oldTab, newTab, oldPanel, newPanel, so you don't need the index to find the object you want to use.

See http://api.jqueryui.com/tabs/#event-activate

ui Type: Object

- newTab
Type: jQuery
The tab that was just activated.
- oldTab
Type: jQuery
The tab that was just deactivated.
- newPanel
Type: jQuery
The panel that was just activated.
- oldPanel
Type: jQuery
The panel that was just deactivated.

Granuloma

I do need the index because I'm saving the active index as a user preference in the database. – Eba