Opened 10 years ago

Closed 8 years ago

Last modified 7 years ago

#4524 closed bug (fixed)

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.
  1. Move the "Nunc tincidunt" tab to the end.
  1. 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 10 years ago.
Sortable and Tabs Interaction Problem (Indexes Internally Incorrect)

Download all attachments as: .zip

Change History (19)

Changed 10 years ago by reedmaniac

Attachment: sortable_test2.html added

Sortable and Tabs Interaction Problem (Indexes Internally Incorrect)

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD1.8
Priority: minormajor

comment:2 Changed 10 years ago by pulpulpullie

This issue still exists in 1.8rc3

comment:3 Changed 10 years ago by pulpulpullie

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');

}

});

comment:4 Changed 10 years ago by pulpulpullie

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.

comment:5 Changed 9 years ago by pulpulpullie

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.

comment:6 Changed 9 years ago by synek

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

comment:7 Changed 9 years ago by marcis20@…

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>

comment:8 Changed 9 years ago by Scott González

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

comment:9 Changed 8 years ago by Corey Frang

Status: newopen

comment:10 Changed 8 years ago by Scott González

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

comment:12 Changed 8 years ago by David Petersen

Resolution: fixed
Status: openclosed

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

Changeset: c3d9bd070051a79e1a288935d420f85278268149

comment:13 Changed 7 years ago by paul.levaillant

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,

comment:14 Changed 7 years ago by Scott González

@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.

comment:15 Changed 7 years ago by idealcastle

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.

Last edited 7 years ago by idealcastle (previous) (diff)

comment:16 Changed 7 years ago by Scott González

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

comment:17 in reply to:  16 ; Changed 7 years ago by idealcastle

Replying to 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.

comment:18 in reply to:  17 Changed 7 years ago by Scott González

Note: See TracTickets for help on using tickets.