Question

I have a table (jqGrid) inside one of the jquery ui tabs (the first one). This table has service requests which are identified as links in that table. When the links are pressed, they should open the detailed service request info into a new tab following the first one.

The problem I am having is, when you open one of the service requests in a new tab and close it, resetting the number of tabs into one which hosts the table; Trying to open the service request again will cause the service request info to be opened into a new tab which is equal to the number of previous tabs which were closed previously.

To be precise, if we have #ui-tab-1, clicking the service request link inside it, will open the service request info into a #ui-tab-2. Now, closing #ui-tab-2 tab and clicking the another service request link will cause #ui-tab-2 to be activated along with the new tab #ui-tab-3. #ui-tab-2 hosts the newly opened ticket info.

I am using scrollableTabs v2.0 plugin/layer to handle the scrollable tabs.

This is the code I am having

var $third_l_tabs = $('#table-nav').tabs({
    show: function(event, ui) {
        //we only care about the first tab which hosts the grid.
        if (ui.index == 0) {
            tableToGrid('#' + table_id, {
                defaults: {
                    recordtext: "View {0} - {1} of {2}",
                    emptyrecords: "No records to view",
                    loadtext: "Loading...",
                    pgtext: "Page {0} of {1}"
                },
                loadonce: true,
                height: 'auto'
            });
            jQuery('#' + table_id).trigger('reloadGrid');
        }

        $(ui.panel).on('click', "td[role='gridcell'] a", function(event) {
            //here where the addition of new tab fails.
            $third_l_tabs.tabs('add', this.href, $(this).find('b').text());  
            event.preventDefault();
        });
    },
})

And I was checking jQuery ui call stack and I noticed that the show() function of the tabs is called for each one of these unrequited closed old tabs!

This is the trace I got in Chrome and as you can see the last 3 lines, show is called again repetitively

$.tabs.show() at scp.js:580
$.Widget._trigger() at jquery-ui-1.8.17.custom.js:581
$.widget._tabify.showTab() at jquery-ui-1.8.17.custom.js:7195
$.widget._tabify() at jquery-ui-1.8.17.custom.js:7282    <-- it starts from here
jQuery.extend.dequeue() at jquery-1.7.1.js:2066
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2098
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2097
$.widget._tabify.hideTab() at jquery-ui-1.8.17.custom.js:7211
$.widget._tabify() at jquery-ui-1.8.17.custom.js:7278
jQuery.extend.dequeue() at jquery-1.7.1.js:2066
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2098
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.dequeue() at jquery-1.7.1.js:2097
$.widget.load() at jquery-ui-1.8.17.custom.js:7544
$.widget._tabify() at jquery-ui-1.8.17.custom.js:7285
jQuery.event.dispatch() at jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle() at jquery-1.7.1.js:2875
jQuery.event.trigger() at jquery-1.7.1.js:3144
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3781
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3780
$.xui.tabs.$.extend._create.hiddenOn.right() at jquery.scrollabletab.js:101
jQuery.event.dispatch() at jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle() at jquery-1.7.1.js:2875
jQuery.event.trigger() at jquery-1.7.1.js:3144
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3781
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
jQuery.fn.extend.trigger() at jquery-1.7.1.js:3780
$.Widget._trigger() at jquery-ui-1.8.17.custom.js:578
$.widget.add() at jquery-ui-1.8.17.custom.js:7411
(anonymous function)() at jquery-ui-1.8.17.custom.js:421
jQuery.extend.each() at jquery-1.7.1.js:658
jQuery.fn.jQuery.each() at jquery-1.7.1.js:271
$.widget.bridge.$.fn.(anonymous function)() at jquery-ui-1.8.17.custom.js:418
$.tabs.show() at scp.js:581
jQuery.event.dispatch() at jquery-1.7.1.js:3256
jQuery.event.add.elemData.handle.eventHandle() at jquery-1.7.1.js:2875

Any help about what could be the issue would be appreciated. I included the JSFiddle example for this issue.

Answer 1

Adding event.stop() after event.preventDefault() did the trick. Please see http://jsfiddle.net/neo108/pY3pJ/1/

For some reason the event is being triggered more than once. Add a event.stop() to stop the event from being triggered the second time and so forth…