Tabs: Sortable demo causes bad index references

[reedmaniac]

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.

[reedmaniac]

Sortable and Tabs Interaction Problem (Indexes Internally Incorrect)

[pulpulpullie]

This issue still exists in 1.8rc3

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

}

});

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

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

[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

[[email protected]…]

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>

[Scott González]

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

[petersendidit]

​https://github.com/petersendidit/jquery-ui/commit/23b0dfeb2b57679689f2299fed08b60d6485ef0d

[David Petersen]

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

Changeset: c3d9bd070051a79e1a288935d420f85278268149

[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,

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

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

[Scott González]

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

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

[Scott González]

Replying to idealcastle:

I didn't know that was changed.

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