Tabs: Sortable demo causes bad index references

This issue still exists in 1.8rc3

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

}

});

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.

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.

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

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>

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

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

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

Changeset: c3d9bd070051a79e1a288935d420f85278268149

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,

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

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.

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

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.

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