Question

I have 7 jquery ui tabs on a jspx page. I dynamically add a new tab to render search results from a search form. So far, so good. Now when the user clicks on any of the other tabs, the newly created tab for “Search Results” must be removed. This is where my problem begins.

                $('#tabs').tabs({
                    select : function(event, ui) { //bind click event to link                   
                        selectedIndex = ui.index;

                        if ((selectedIndex < 8) && ($('#tabs').tabs("length") > 8)) {
                            $('#tabs').tabs('remove',8);
                        }

                         //I have other stuff here for each of the original 7 tabs
                 });

It seems that this tab is only deletable after I re-initialize the tabs like

$('#tabs').tabs('destroy').tabs();
$('#tabs').tabs('remove',8);

But I have a data grid on my page which is dynamically added to the system of tabs based on the tab index being clicked. If I destroy and then remove, my grid disappears completely form all other tabs(removed from the dom) which is not what I want.

Please help, thanks.

Answer 1

The problem is that you are trying remove the currently displayed tab. Since this event fires before the change in tab has really occurred, you are essentially pulling the rug out from under yourself. From the UI source:

select: function( index ) {
    index = this._getIndex( index );
    if ( index == -1 ) {
        if ( this.options.collapsible && this.options.selected != -1 ) {
            index = this.options.selected;
        } else {
            return this;
        }
    }
    this.anchors.eq( index ).trigger( this.options.event + ".tabs" );//YOUR EVENT
    return this;
},

If you want to delete a tab you’ll have to be careful “when” this occurs. Your code works fine when hooked into “show”.

show: function(event, ui) { //bind click event to link                   
                selectedIndex = ui.index;

                if ((selectedIndex < 2) && ($('#tabs').tabs("length") > 2)) {
                    $('#tabs').tabs('remove',2);
                }
            }

jsfiddle