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

Question

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? :)

Answer 1

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?

Answer 2

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

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