Skip to main content

Search and Top Navigation

#4524 closed bug (fixed)

Opened May 08, 2009 06:47PM UTC

Closed April 28, 2011 11:04PM UTC

Last modified December 04, 2012 03:38PM UTC

Tabs: Sortable demo causes bad index references

Reported by: reedmaniac Owned by:
Priority: major Milestone: 1.9.0
Component: ui.tabs Version: 1.7.1
Keywords: tabs sortable remove Cc:
Blocked by: Blocking:
Description

When one uses the Sortable plugin with the Tabs plugin, the Tabs internal list of tabbed items is not updated when a tab changes position. That means, if you use the .tabs('remove') method, the current index will not line up with the index for the item in Tabs.

I have included a file based of the ./tabs/sortable.html demo that shows this with a delete image at the upper right of every tab. To duplicate do the following:

1. Drop this file into your ./demos/tabs/ folder so it loads files/themes correctly.

2. Move the "Nunc tincidunt" tab to the end.

2. Click the image at the upper right of the "Aenean lacinia" tab to delete it.

Result: The "Nunc tincidunt" tab is incorrectly deleted.

Attachments (1)
  • sortable_test2.html (3.9 KB) - added by reedmaniac May 08, 2009 06:48PM UTC.

    Sortable and Tabs Interaction Problem (Indexes Internally Incorrect)

Change History (18)

Changed May 11, 2009 11:26AM UTC by jzaefferer comment:1

milestone: TBD1.8
priority: minormajor

Changed March 12, 2010 01:45PM UTC by pulpulpullie comment:2

This issue still exists in 1.8rc3

Changed March 15, 2010 08:46AM UTC by pulpulpullie comment:3

Here's a workaround:

/*

Tabs - Extensions - refreshPositions

Applying sortable to the tabs will mess up the indexes.

Call this method to refresh the cached items

*/

$.extend($.ui.tabs.prototype, {

refreshPositions: function() {

this.list = this.element.find('ol,ul').eq(0);

this.lis = $('li:has(a[href])', this.list);

this.anchors = this.lis.map(function() { return $('a', this)[0]; });

return this;

}

});

/*

Use the extension like this:

*/

var tabsObject = $('#tabs').tabs();

tabsObject.find('.ui-tabs-nav').sortable({

update: function() {

self.tabsObject.tabs('refreshPositions');

}

});

Changed March 15, 2010 10:58AM UTC by pulpulpullie comment:4

Better yet:

$.extend($.ui.tabs.prototype, {

refreshPositions: function() {

return this._tabify();

}

});

In my opinion _tabify should be made public under the alias 'refreshPositions' or 'refresh'.

.tabs('add', ...) and delete already call _tabify to refresh the cache.

Changed May 10, 2010 10:10AM UTC by pulpulpullie comment:5

http://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.tabs.js - row 511:

remove: function(index) {
	var o = this.options, $li = this.lis.eq(index).remove(),
		$panel = this.panels.eq(index).remove();

When you apply sortable-widget to the tabs, only the tabs are sorted, not the panels.

Refreshing the positions using _tabify doesn't sort the panels.

Therefor, deleting a panel will delete the right tab and the wrong panel.

The workaround I posted above does not work.

Tabs and sortable are simply not compatible, don't attempt to use it until tabs is rewritten.

Changed December 12, 2010 07:24PM UTC by synek comment:6

The _tabify() workaround works if you sort panels before _tabify for example this way:

$('ul:first > li', $tabs).each(function(index) {

$tabs.append($(this).data('panel'));

});

where each li has its panel saved in data('panel'). There is probably simplier way to do this modifying tabs() source

Changed March 09, 2011 04:59PM UTC by marcis20@yahoo.com comment:7

What about this solution?

$.extend($.ui.tabs.prototype, {

refreshPositions: function() {

$('ul:first li', $tabs).each(function(index) {

$('#panels').append($($('a:first', this).attr('href')));

});

return this._tabify();

}

});

Where 'panels' is the id of container element and tabs are linked to tab id:

<a href="#tab-1">Tab name</a>

Changed March 09, 2011 05:08PM UTC by scottgonzalez comment:8

A refresh method is being added which will solve this: http://forum.jquery.com/topic/tabs-api-redesign

Changed March 28, 2011 07:27PM UTC by gnarf comment:9

status: newopen

Changed April 11, 2011 02:19PM UTC by scottgonzalez comment:10

summary: Tabs Interaction with Sortable - Index ProblemTabs: Sortable demo causes bad index references

Changed April 28, 2011 11:04PM UTC by David Petersen comment:12

resolution: → fixed
status: openclosed

Tabs: update sortable demo to call refresh method. Fixes #4524 Tabs: Sortable demo causes bad index references

Changeset: c3d9bd070051a79e1a288935d420f85278268149

Changed November 15, 2012 09:13AM UTC by paul.levaillant comment:13

Hello,

After several attempts to have this functionality working I ended up wondering weither this defect was eventually corrected or not.

Indeed the following problem still occurs for me:

If I sort my tabs (step 1) AND If I try to remove (step 2) a tab right after performing step 1, using this syntax :

$('#tabs').tabs("remove", index);

THEN wrong tab will be removed.

After several tests I confirm that "sortable" does not update the tab index.

For information I run those js:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

Please confirm this bug was resolved or if not, please suggest workaround.

Best Regards,

Changed November 15, 2012 01:26PM UTC by scottgonzalez comment:14

@paul.levaillant Note that the milestone of the ticket is 1.9.0, so you're using a version of jQuery UI that does not contain the fix.

Changed December 04, 2012 03:21PM UTC by idealcastle comment:15

_comment0: I want to add. This has not been resolved. \ [http://jsfiddle.net/uwnvb/] \ \ If you place a tracker that loads every 250 milliseconds. (this checks which tab is selected). \ Then sort the tabs. you will notice if you move tab id [0] into the center, you're still selecting tab [0]. When you should be selecting tab [1]. The index of tabs 'should' update to the actual selection. This will avoid issues later on when you run arrays and add up tabs.etc.. \ \ (when you start deleting tabs, it can get even worse. However the sorting seems to be the biggest issue on this. 1354635304956800

I want to add. This has not been resolved.

http://jsfiddle.net/uwnvb/

If you place a tracker that loads every 250 milliseconds. (this checks which tab is selected).

Then sort the tabs. you will notice if you move tab id [0] into the center, you're still selecting tab [0]. When you should be selecting tab [1]. The index of tabs 'should' update to the actual selection. This will avoid issues later on when you run arrays and add up tabs.etc..

(when you start deleting tabs, it can get even worse. However the sorting seems to be the biggest issue on this.

and to go with what I'm talking about, for instance. You have tab index 0 selected. You move the tab into tab index 2 position (however it still says tab 0 is selected) Unless you click another tab and the indexes fix themselves (but lets say you dont) and I click a "save" button, which saves the textarea content thats in the panel of tab 0, however my tab is technically 2. So in saves tab 0. and tab 2 was never saved. This just an example. I could create a 'reload' button and it would reload the wrong tab..etc. But thats the idea. The tab index on selected never changes.

Changed December 04, 2012 03:31PM UTC by scottgonzalez comment:16

@idealcastle That bug is limited to the deprecated selected option. You should use active instead. http://jsfiddle.net/uwnvb/3/

Changed December 04, 2012 03:36PM UTC by idealcastle comment:17

Replying to [comment:16 scott.gonzalez]:

@idealcastle That bug is limited to the deprecated selected option. You should use active instead. http://jsfiddle.net/uwnvb/3/

I didn't know that was changed. Okay I guess this was resolved. Thanks for clarification.

Changed December 04, 2012 03:38PM UTC by scottgonzalez comment:18

Replying to [comment:17 idealcastle]:

I didn't know that was changed.

http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active