ui.tabs add callback not able to set tab

Question

Hi, I am trying to get jQuery tabs to behave like IE and Firefox. I have a few tabs with an "addtab" at the end. When this tab is clicked a new tab is added, this is fine. But i want to select the second last tab. This is proving to be quite difficult. my init code is

 $tabs =$("#tabs").tabs({
    add: function(event, ui) {
        $tabs.tabs('select', $tabs.tabs( 'length' ) -2);
        alert ("after setting tab");
    }
});

my add tab code is

 $("#addtab").click(function(){
    showcal();
    // The first thing to do is to deselect all the other selections
    $("#tabs .ui-corner-top").each (function () {
        $(this).removeClass ("ui-tabs-selected ui-state-active").addClass ("ui-state-default");
    });
    $tabs.tabs('add','#extra','Generate Report', ($tabs.tabs('length')-1));
    tabContainerTabCount++;

});

however in the add callback the following line is resetting the selected tab

self._trigger('select', null, self._ui(this, $show[0])) === false)

If anyone has any solution or reason why this is done, can you let me know

Thanks

John

Answer 1

I was pointed to the answer at the following web page http://forum.jquery.com/topic/ui-tabs-unable-to-set-index-after-add#14737000000698077

thanks tsukasa1989