CODEWITHSUNDEEP
jquery-uitabs
Matej Hrescak
Matej Hrescak

Reputation: 73

How to get the selected tab panel element in Jquery UI Tabs?

The problem. I have multiple tab, their content is loaded via ajax, so the div id's of tabs' panels are assigned dynamically. I have a form in one, ajaxified by this jquery plugin by a callback function bound to tabs.load event I pass it one parameter, the ui.panel, so that the ajaxForm() knows the target where to load result:

function initAjaxForms(loadtab)
{
   $('form').ajaxForm({target:loadtab, success:initAjaxForms});
}

This works fine, EXCEPT when I submit the form and PHP returns it as not valid, I cannot ajaxify it anymore (of course, the function is called with no loadtab parameter). the perfect solution would be to have more options to tabs so that i can do something like this:

function initAjaxForms()
{
   var selected = $('tabs').tabs('option', 'selectedpanel');
   $('form').ajaxForm({target:selectedpanel, success:initAjaxForms});
}

but this is obviously not it. Any ideas?

Upvotes: 6

Views: 22870

Answers (7)

Corey Alix
Corey Alix

Reputation: 2750

From http://api.jqueryui.com/tabs/#option-active you can do this:

var activeTab = this.$tabs.tabs("option", "active");
_this.$tabs.find(">div")[activeTab]

Upvotes: 1

Tyler Liu
Tyler Liu

Reputation: 20406

Maybe jqueryUI has changed, the accepted answer does not work for me. Here is what works:

$("#tabs div.ui-tabs-panel[aria-hidden='false']")

Upvotes: 12

Troyhy
Troyhy

Reputation: 458

Here is more simpler version:

function getSelectedTab(tabID){
   return $(tabID).find("[aria-expanded=true]");
}

var selectedPanel = getSelectedTab('#tabs');

Upvotes: 1

bismay4u
bismay4u

Reputation: 34

function getSelectedTab(tabID){
    return $(tabID).find($(tabID+" .ui-tabs-nav .ui-tabs-selected a").attr('href'));
}
var selectedPanel = getSelectedTab('#tabs');

This one will get you the object of the selected tab pane.

Upvotes: 1

Tiff
Tiff

Reputation: 41

I've been having this very problem, and whilst this is an old question, it's the one that led me to this answer, which works:

var selectedPanel = $("#yw1 div.ui-tabs-panel:not(:has(.ui-tabs-hide))");

Upvotes: 1

devin_s
devin_s

Reputation: 3405

Select the .ui-tabs-panel that isn't hidden with .ui-tabs-hide:

var selectedPanel = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)");

Upvotes: 17

Matej Hrescak
Matej Hrescak

Reputation: 73

I eventually figured it out with a little hack, but I sense this is not a perfect solution:

function initAjaxForms()
{
    var selected = $('#tabs').tabs('option', 'selected');
    var selectedtab = '#tabs > div:eq('+selected+')';
    var selectedtabelement = $(selectedtab).get(0);

    $('form').ajaxForm({ target:selectedtabelement, success:initAjaxForms});

}

anyone with better idea?

Upvotes: 1

Related Questions