#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:
- Drop this file into your ./demos/tabs/ folder so it loads files/themes correctly.
- Move the "Nunc tincidunt" tab to the end.
- 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)
Change History (19)
Changed 14 years ago by
Attachment: | sortable_test2.html added |
---|
comment:1 Changed 14 years ago by
Milestone: | TBD → 1.8 |
---|---|
Priority: | minor → major |
comment:3 Changed 13 years ago by
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 13 years ago by
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 13 years ago by
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 12 years ago by
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 12 years ago by
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 12 years ago by
A refresh method is being added which will solve this: http://forum.jquery.com/topic/tabs-api-redesign
comment:9 Changed 12 years ago by
Status: | new → open |
---|
comment:10 Changed 12 years ago by
Summary: | Tabs Interaction with Sortable - Index Problem → Tabs: Sortable demo causes bad index references |
---|
comment:11 Changed 12 years ago by
comment:12 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
Tabs: update sortable demo to call refresh method. Fixes #4524 Tabs: Sortable demo causes bad index references
Changeset: c3d9bd070051a79e1a288935d420f85278268149
comment:13 Changed 10 years ago by
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 10 years ago by
@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 10 years ago by
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.
comment:16 follow-up: 17 Changed 10 years ago by
@idealcastle That bug is limited to the deprecated selected
option. You should use active
instead. http://jsfiddle.net/uwnvb/3/
comment:17 follow-up: 18 Changed 10 years ago by
Replying to scott.gonzalez:
@idealcastle That bug is limited to the deprecated
selected
option. You should useactive
instead. http://jsfiddle.net/uwnvb/3/
I didn't know that was changed. Okay I guess this was resolved. Thanks for clarification.
comment:18 Changed 10 years ago by
Replying to idealcastle:
I didn't know that was changed.
http://jqueryui.com/upgrade-guide/1.9/#deprecated-selected-option-renamed-to-active
Sortable and Tabs Interaction Problem (Indexes Internally Incorrect)