get the current tab in jQuery UI tabs

Question

I am using jQuery UI Tabs inside of the jQuery UI dialog window.

I've come across an instance, where I need to find the id of the current tab when clicking on one of the dialog buttons. Looking at the HTML generated by jQuery UI tabs and dialog, I can't really find a way of doing this. The <ul> elements that hold the tab, are about 3 <div>'s away from the group of dialog buttons.

I tried:

$("#DialogBox").dialog({
    autoOpen: false,
    modal: true,
    buttons: [
        {
        text: "Save",
        click: function () {
        var currentTabId = $(this).closest("ul").attr("id");
        alert(currentTabId);

But I just get an 'undefined' alert back.

Is there a way of doing this?

Thanks

Answer 1

This is what worked for me (jQuery 1.9, jQueryUI 1.10). I have not tested this for earlier versions of jQueryUI, but if you have jQueryUI 1.8 or earlier, instead of 'active' try using 'select'.

// GET INDEX OF ACTIVE TAB
// make sure to replace #tabs with the actual selector
// that you used to create the tabs
var activeTabIdx = $('#tabs').tabs('option','active');

// ID OF ACTIVE TAB
// make sure to change #tabs to your selector for tabs
var selector = '#tabs > ul > li';
var activeTabID = $(selector).eq(activeTabIdx).attr('id');

// ID OF ACTIVE TAB CONTENT
// make sure to change #tabs to your selector for tabs
var selector = '#tabs [id=ui-tabs-' + (activeTabIdx + 1) + ']';
var activeTabContentID = $(selector).attr('id');