Question

I have the following function:

function createTabs( selectorText, selected ) {
    var tabs = $( selectorText ).tabs();        
    if( selectorText == '#content .tabs' ) {
        contentTabs = tabs;
        $( selectorText ).unbind( 'tabsselect' ).bind( 'tabsselect', function( event, ui ) {            
            var queryNumber = $( ui.tab ).data('query_number');
            if( queryNumber ) {
                $( ui.panel ).html( '<table id="table"></table>' )
                var table = $( ui.panel ).find( 'table' );
                populateFlexigrid( table, queryNumber );
            }
        });
    }

    if( !selected ) {
        selected = 0;
        tabs.tabs( 'select', 0 )
    }
    tabs.tabs( 'select', selected );
}

In the if statement at the end of the function I am setting the selected tab to whatever tab should be selected. When entering into this if statement the tab that is selected is always 0 because the tabs have just been created. So my problem is that I’m trying to select a tab that is already selected. This means the function I bound to that tab isn’t executing.

Is there any way I can force the tab to be selected or for the tabsselect event on that tab so my bound function runs?

Answer 1

I don’t like this solution, but it is working. If anyone has a better way please post it.

var selectedTab = $tabs.tabs('option', 'selected');
$tabs.find('li').eq(selectedTab).removeClass('ui-tabs-selected').end().tabs('select', selectedTab);