Opened 15 years ago
Closed 12 years ago
#4403 closed bug (fixed)
Removing a tab can result in a selected index of -1 if fx option is used
Reported by: | rockwild | Owned by: | |
---|---|---|---|
Priority: | major | Milestone: | 1.9.0 |
Component: | ui.tabs | Version: | 1.7.1 |
Keywords: | tabs | Cc: | |
Blocked by: | Blocking: |
Description
It appears that occasionally when a tab is deleted using $("#example").tabs("remove", index) the selected.tabs property in data is set to -1. This makes any operations done after the deletion that require the selected tab's index not work when using the recommended way of getting the currently selected tab index: $("#tab_element").data("selected.tabs"); or $("#tab_element").tabs('option', 'selected');. I tried setting the selected.tabs value in the "show" callback function, but that didn't seem to change anything. Here is the function I am using to delete tabs:
function deleteTab(){ var tabEl = $j(".ui-tabs-selected"); var tabsEl = $j("#tabs"); if(confirm('Are you sure you want to delete the "' + tabEl.find ("span").html() + '" tab?')){ tabsEl.tabs("remove", tabsEl.data("selected.tabs")); } }
I have set up a rough demo at http://games4moola.com/portalpage.cfm. Just use the delete link to delete the first tab and then try to delete the second tab. You can also try clicking the second tab then going back to the first and deleting them (which works for me) and if you get them both deleted, hit the "+" tab to add two more and try to delete those and the same issue will happen.
Change History (12)
comment:1 Changed 14 years ago by
Milestone: | TBD → 1.7.2 |
---|
comment:2 Changed 14 years ago by
Milestone: | 1.7.2 → 1.8 |
---|
comment:3 Changed 14 years ago by
comment:4 Changed 14 years ago by
I'm experiencing this as well. Another undesired side-effect I've noticed with tab removal is you cannot do something like this:
// Assume tab 4 is selected when this code is executed $('#MyTabs').tabs('select',1); $('#MyTabs').tabs('remove',4);
You would assume your Tabs control would select tab 1 and remove tab 4 and stay on tab 1 but it does not. Because you /were/ on tab 4 and you programmatically select tab 1, the ui-tabs-selected class hasn't yet been removed from tab 4's li element. The offending code in ui.tabs.js is as follows:
494 if ($li.hasClass('ui-tabs-selected') && this.anchors.length > 1) { 495 this.select(index + (index + 1 < this.anchors.length ? 1 : -1)); 496 }
This is my current workaround:
$('#MyTabs ul li').removeClass('ui-tabs-selected'); $('#MyTabs').tabs('select',0); $('#MyTabs').tabs('remove',TabIndex);
comment:5 Changed 14 years ago by
Just to chime in. I'm experiencing this exact same issue. It seems like it should be a relatively easy fix so I'm surprised that this bug has been open for 8 months. Surely this is something anyone who tries to remove a tab will run into?
comment:6 Changed 14 years ago by
var selected = $('#tabs').tabs('option', 'selected'); selected = 4 $('#tabs').tabs('remove', selected); removes the 4th tab var newSelected = selected - 1; newSelected = 3 $("#tabs").tabs({selected: newSelected}); Does not select the third tab? var newSelectedTab = $('#tabs').tabs('option', 'selected'); newSelectedTab = -1
A used clicks the delete button again and nothing happens since there is no tab with the index of -1.
comment:7 Changed 14 years ago by
I've also seen this bug:
1) A user removes a tab i.e.
var selected = $('#tabs').tabs('option', 'selected'); //selected = 4 $('#tabs').tabs('remove', selected); //removes the 4th tab
2) A new tab is selected in the UI, normally the next tab unless the last tab was deleted. Then the previous tab is selected (all is well)
3) The user deleted the tab that is selected in the UI.
Again:
var selected = $('#tabs').tabs('option', 'selected'); // this time selected returns -1! $('#tabs').tabs('remove', selected); // nothing happens as selected is -1
4) If the user tries to delete the tab again (as they would as it hasn't been deleted). Then this happens:
var selected = $('#tabs').tabs('option', 'selected'); // this time selected returns 3 (as it should) $('#tabs').tabs('remove', selected); // tab gets removed and everything works ok
comment:8 Changed 14 years ago by
Seems like this bug occurs only when the tabs are animated.
Since the correct tab is selected, just the selected index is wrong, the following workaround fixes the index:
/* * Workaround for tabs select and animation bug * http://dev.jqueryui.com/ticket/4403 */ if ($("#tabs").tabs("option", "selected") == -1) $("#tabs").tabs("option", "select", $(".ui-tabs-selected", "#tabs").index());
comment:9 Changed 13 years ago by
Status: | new → open |
---|
JSFiddle Case: http://jsfiddle.net/gnarf/enW6k/3
comment:10 Changed 13 years ago by
Summary: | Issue with tab deletion → Removing a tab can result in a selected index of -1 if fx option is used |
---|
comment:12 Changed 12 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
As hyperlink mentions, this seems to work properly in master. Note that properly in this case means as you would expect from existing behavior of the remove method. This behavior is actually different than the behavior if you use the new API and remove the respective elements then call refresh.
I changed my setup on the server. If you still want to access the page you need to use this link: http://games4moola.com/portalpage.cfm?itsme=true