Geek Answers Handbook

How to get selected tab bar item in jQuery UI tabs?

Problem. I have several tabs, their contents are loaded via ajax, so the div id of the tab panels is assigned dynamically. I have a form in one, ajaxified this jquery plugin using the callback function associated with the tabs.load event. I pass it one parameter, ui. panels, so ajaxForm () knows the purpose where the result will be loaded:

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

This works fine, EXCEPT, when I submit the form and PHP returns it as invalid, I can no longer use it (of course, the function is called without the loadtab parameter). the ideal solution would be to have more tab options 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 the case. Any ideas?

+5
7

.ui-tabs, .ui-tabs-hide:

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

, jqueryUI , . :

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

, , :

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});

}

- ?

+1

, , , , :

var selectedPanel = $("#yw1 div.ui-tabs-panel:not(:has(.ui-tabs-hide))");
+1
function getSelectedTab(tabID){
    return $(tabID).find($(tabID+" .ui-tabs-nav .ui-tabs-selected a").attr('href'));
}
var selectedPanel = getSelectedTab('#tabs');

.

+1

:

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

var selectedPanel = getSelectedTab('#tabs');
+1

http://api.jqueryui.com/tabs/#option-active :

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

More articles:


All Articles