Skip to main content

Search and Top Navigation

#5069 closed bug (fixed)

Opened January 17, 2010 01:49AM UTC

Closed May 09, 2011 05:55PM UTC

Last modified April 12, 2012 03:54PM UTC

ui.tabs.add creates two tab panels when using a full URL

Reported by: snover Owned by:
Priority: major Milestone: 1.9.0
Component: ui.tabs Version: 1.8a2
Keywords: tabify, tabId, add Cc:
Blocked by: Blocking:
Description

When creating a new tab by passing in a full URL to ui.tabs.add, two tab panels are added to the DOM—one by ui.tabs.add and another by ui.tabs._tabify. The panel created by ui.tabs.add never gets used, never gets removed, and ends up sitting wasting space for no reason.

I’m not familiar enough yet with the internals of jQuery UI to know what the proper solution is; removing all references to $panel in ui.tabs.add gets things working somewhat better for AJAX calls, but breaks page fragments completely.

The generated ID also ends up double-incremented because ui.tabs._tabId gets called twice: once to get the id for the tab in ui.tabs.add, and then again to get a tab panel ID in ui.tabs._tabify.

Regards,

Attachments (0)
Change History (21)

Changed February 18, 2010 03:45PM UTC by scottgonzalez comment:1

milestone: TBD1.8

Changed February 26, 2010 07:14PM UTC by snover comment:2

Changed April 26, 2010 12:18AM UTC by ajpiano comment:3

priority: minorcritical

Changed May 09, 2010 06:26PM UTC by dominiquevincent comment:4

Changed May 10, 2010 02:14PM UTC by dominiquevincent comment:5

A proposal to fix the problem is available here :

http://github.com/dominiquevincent/jquery-ui/commit/8f69b7546253eb9328b8e72549ff2a7c9d4b2db9

The panel in ui.tabs.add is created only if it's an in-page tab.

2 html files have been added in tests/visual/tabs in order to test this fix.

Changed July 09, 2010 07:34AM UTC by Jelly comment:6

Replying to [comment:5 dominiquevincent]:

A proposal to fix the problem is available here : http://github.com/dominiquevincent/jquery-ui/commit/8f69b7546253eb9328b8e72549ff2a7c9d4b2db9 The panel in ui.tabs.add is created only if it's an in-page tab. 2 html files have been added in tests/visual/tabs in order to test this fix.

Only one element is added to the DOM but the _tabId function is called twice and next tab gets double-incremented id.

First tab called:

ui-tabs-2

Second tab:

ui-tabs-4

Changed July 20, 2010 12:00PM UTC by jquery@pvt comment:7

I've solved this by changing the _tabId function:

_tabId: function(a) {
        //PATCH ADDITION, if id set in data use that (when adding a tab), otherwise tabify will create two panels for 1 added tab
        if($.data(a, 'id')) {
            return $.data(a, 'id');
        } else {
        return a.title && a.title.replace(/\\s/g, '_').replace(/[^A-Za-z0-9\\-_:\\.]/g, '') ||
            this.options.idPrefix + getNextTabId();
        }
    }

And in the add function adding the following line:

add: function(url, label, index) {
        if (index === undefined) {
            index = this.anchors.length; // append by default
        }

        var self = this, o = this.options,
            $li = $(o.tabTemplate.replace(/#\\{href\\}/g, url).replace(/#\\{label\\}/g, label)),
            id = !url.indexOf('#') ? url.replace('#', '') : this._tabId($('a', $li)[0]);
        //PATCH ADDITION, set id
        $.data($('a', $li)[0], 'id', id);
        $li.addClass('ui-state-default ui-corner-top').data('destroy.tabs', true);

        // try to find an existing element before creating a new one
        var $panel = $('#' + id);

Changed September 01, 2010 07:58PM UTC by eric.muyser comment:8

Just ran into this bug, quite a pest.

Changed October 19, 2010 03:40PM UTC by scottgonzalez comment:9

priority: criticalmajor

Changed November 01, 2010 02:39PM UTC by lotjuh comment:10

I solved this by changing only the add function (removed lines with // ):

    add: function( url, label, index ) {
        if ( index === undefined ) {
            index = this.anchors.length;
        }

        var self = this,
            o = this.options,
            $li = $( o.tabTemplate.replace( /#\\{href\\}/g, url ).replace( /#\\{label\\}/g, label ) );

        //id = !url.indexOf( "#" ) ? url.replace( "#", "" ) : this._tabId( $( "a", $li )[ 0 ] );

        $li.addClass( "ui-state-default ui-corner-top" ).data( "destroy.tabs", true );

        // try to find an existing element before creating a new one
    //  var $panel = $( "#" + id );
    //  if ( !$panel.length ) {
    //      $panel = $( o.panelTemplate )
    //          .attr( "id", id )
    //          .data( "destroy.tabs", true );
    //  }
    //  $panel.addClass( "ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" );

        if ( index >= this.lis.length ) {
            $li.appendTo( this.list );
            //$panel.appendTo( this.list[ 0 ].parentNode );
        } else {
            $li.insertBefore( this.lis[ index ] );
        //  $panel.insertBefore( this.panels[ index ] );
        }

        o.disabled = $.map( o.disabled, function( n, i ) {
            return n >= index ? ++n : n;
        });

        this._tabify();

        if ( this.anchors.length == 1 ) {
            o.selected = 0;
            $li.addClass( "ui-tabs-selected ui-state-active" );
            $panel.removeClass( "ui-tabs-hide" );
            this.element.queue( "tabs", function() {
                self._trigger( "show", null, self._ui( self.anchors[ 0 ], self.panels[ 0 ] ) );
            });

            this.load( 0 );
        }

        this._trigger( "add", null, this._ui( this.anchors[ index ], this.panels[ index ] ) );
        return this;
    },

Changed January 06, 2011 06:39AM UTC by iainxt comment:11

Until it is fixed, I am using the following workaround. It seems to work for me. If you expect the active div to be empty, then it wont work.

tabContainer.bind("tabsload",function(){
  $(this).children('div.ui-tabs-panel:empty').addClass('ui-tabs-hide');
 });

Changed January 06, 2011 03:08PM UTC by stefanlivens comment:12

I just found out the hard way this bug exists, but I also stumbled upon a workaround.

The point is, if you it like this:

<div id="tabs">
   <ul>...</ul>
   <div id="tab-1">
   </div>
   ...
   <div id="tab-new">
      ...content...
      <script>
      $(function() {
   	$("#tabs").tabs( "add" , "#tab-new" , "New added tab" );
      });
      </script>
   </div>
</div>

Then you'll get 2 "new added tab"'s in the tabbar!

If you do it like this:

<div id="tabs">
   <ul>...</ul>
   <div id="tab-1">
   </div>
   ...
   <div id="tab-new">
      ...content...
   </div>
   <script>
   $(function() {
      $("#tabs").tabs( "add" , "#tab-new" , "New added tab" );
   });
   </script>
</div>

Then it's ok. (the <script> is outside of the div that becomes a tab-panel)

It looks like the content of the tab is "executed" again when adding it like a tab.

Changed April 28, 2011 12:52AM UTC by petersendidit comment:13

This looks to be fixed with the new tabs rewrite: http://jsfiddle.net/petersendidit/rmEYT/17/

Changed May 09, 2011 05:55PM UTC by scottgonzalez comment:14

resolution: → fixed
status: newclosed

Fixed in 1bacdec6be7e9d543224c69344041aaccde059c0

Changed July 20, 2011 01:35PM UTC by scottgonzalez comment:15

#7570 is a duplicate of this ticket.

Changed October 03, 2011 04:42PM UTC by john.culviner comment:16

Hi,

I'm curious about the status of this bug. I have latest jQuery UI @ 1.8.16 on the bug still exists. I would be willing to switch to the "tabs rewrite" but where is that? I'd rather not go into the source and fix it to stay future compatible. The "Fixed in 1bacdec6be7e9d543224c69344041aaccde059c0" has a tooltip that says "No changeset 1bacdec6be7e9d543224c69344041aaccde059c0 exists in the repository." so I'm wondering if this got lost somewhere by mistake?

Thanks for the help!

Changed October 04, 2011 01:11PM UTC by scottgonzalez comment:17

The milestone says 1.9, so this is not in 1.8.16. You need to use master to get this fix.

Changed April 12, 2012 03:28PM UTC by tadudek comment:18

_comment0: Replying to [comment:17 scott.gonzalez]: \ > The milestone says 1.9, so this is not in 1.8.16. You need to use master to get this fix. \ \ -Where do I find master? \ 1334245164497473

Replying to [comment:17 scott.gonzalez]:

The milestone says 1.9, so this is not in 1.8.16. You need to use master to get this fix.

-Where do I find master?

EDIT: found it, nm.

Changed April 12, 2012 03:39PM UTC by scottgonzalez comment:19

Changed April 12, 2012 03:46PM UTC by tadudek comment:20

Replying to [comment:19 scott.gonzalez]:

http://github.com/jquery/jquery-ui

is there a minified version of the pre-release?

Changed April 12, 2012 03:54PM UTC by scottgonzalez comment:21