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

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

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

Answer 2

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

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