Response title
This is preview!
Move this topic
Bug with tabs and sortable
in Using jQuery UI
•
2 years ago
When using sortable on tabs there is a bug when calling tabs('remove', index) : a wrong tab is removed instead of the one at the given index.
To check this, merge the "Sortable" and "Simple manipulation" demos. Add some tabs then rearrange them a couple of times. Delete the second tab starting from left and it remains there while another tab gets deleted.
It looks like the tab order is kept into an internal array that is not affected by the sortable effect.
Is there a workaround to this before the next version as I'm now locked with this bug?
6
Replies(15)
Réf.: Bug with tabs and sortable
2 years ago
I've looked at the code in jquery.ui.tabs.js and the problem comes from the internal "lis" object which holds the list of each "<li>". This object is indexed in the order of created tabs and is not dynamically updated by sortable().
This list should be sorted with the current <li> order in the DOM before any indexed manipulation:
- remove: function(index) {
var o = this.options, $li = this.lis.eq(index).remove(),
I'd like to use a workaround until this is fixed which is looking at the internal "lis" object to get the internal index number of the tab I want to delete. How can I access this object from the tabs widget?
Leave a comment on voxen.jquery's reply
Leave a comment on voxen.jquery's reply
Leave a comment on jonh04's reply
Re: Bug with tabs and sortable
2 years ago
i've just bumped into this. it's quite a headache. any developments?
Leave a comment on pcristov's reply
Re: Bug with tabs and sortable
2 years ago
I am also having this issue... I think I am going to modify the jquery code to update the list array to get around this for now, but I really wish there were a simpler solution. Unfortunately, I don't have the option of disabling the sort in my app. I love the ui overall, it has saved me a lot of time, so I guess this one little bug (only one I have found so far) isn't too bad.
Leave a comment on thermyte's reply
Re: Bug with tabs and sortable
2 years ago
Okay, so I am sure there are a million better ways to do this, but this is what I have done and it seems to work for now. Since "sortable" doesn't update the indexes that tabs uses for deleting and such, I am storing the index that the plugin is expecting when I create the tabs (the index "tabs" originally gave each tab). When you remove or add a tab, the indexes are again updated, so when you do this, you need to also refresh the indexes you stored. Here is how I am doing it:
var i = 0;
$('#tabs').find('li').each(function(){
$(this).data('tabIndex', i);
i++;
});
As you can see, I am just indexing the same way that "tabs" does when the tabs are created, so that I have the same indexes it does. When you do this, you can just get the id of the tab you want to delete and call $('#tabId').data('tabIndex') to get its original index.
I hope this is helpful. I tried to find a better way to accomplish this, so if someone else with more experience can figure something out, please let me know.
Re: Bug with tabs and sortable
2 years ago
hi i tried to implment your solution but didnt work.
index = $('#tabs-3').data('tabIndex');
for example didnt return a result. undefined
hope to hear from you
index = $('#tabs-3').data('tabIndex');
for example didnt return a result. undefined
hope to hear from you
- <script type="text/javascript">
$('#tabrenamedialog_layer').find('input').keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
return false;
}
});
$('#addtabdialog_layer').find('input').keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parent().parent().parent().parent().find('.ui-dialog-buttonpane').find('button:first').click(); /* Assuming the first one is the action button */
return false;
}
});
var tabrename = $( "#tabrename" );
var allFields = $( [] ).add( name );
var tips = $( ".validateTips" );
var tabid = null;
var tab_counter = 5;
function showrenametabdialog(divid){
asd = $('#tabs-1').data('tabIndex');
alert(asd);
$("#tabrenamedialog_layer").dialog("open");
tabid = divid;
tabtext = $('#'+tabid).html();
$('#tabrename').val(tabtext);
return false;
}
function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}
function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}
function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}
var map = [ '3|/siteicons/google.gif|http://www.google.com|google.com', '3|/siteicons/cnn.gif|http://www.cnn.com|we caught in a track cnn'];
function addcells(value_string,tab_number_in){
//var myString = valuea;
var array = value_string.split('|');
if(tab_number_in>0) {
//tab_number_in =array[0];
} else {
tab_number_in =array[0];
}
$('#sortable'+tab_number_in).append( '<li class="ui-state-default sorclass" title="'+array[3]+'"><a href="'+array[2]+'" target="_blank"><img src="'+array[1]+'"></img></a></li>' );
}
$('#addtab').click(function(){
$tab_title_input.val('');
$("#addtabdialog_layer").dialog("open");
});
var $tabs = $( "#tabs").tabs({
tabTemplate : "<li><a href='#{href}' id='a#{label}'>#{label}</a> <img src='/images/edit_icon.jpg' onclick=\"showrenametabdialog('a#{label}');\"></img></li>",
add: function( event, ui ) {
var tab_content = $tab_title_input.val() || "Tab " + tab_counter + " content.";
$( ui.panel ).append( '<ul id="sortable'+tab_counter+'" class="connectedSortable ui-helper-reset"><li class="ui-state-default sorclass"><img src="/siteicons/google.gif"></img></li><li class="ui-state-default sorclass"><img src="/siteicons/google.gif></img></li></ul>' );
}
});
function addTab() {
var tab_title = $tab_title_input.val() || "Tab " + tab_counter;
$tabs.tabs( "add", "#tabs-" + tab_counter, "tabs-" + tab_counter );
$("#atabs-" + tab_counter).html(tab_title);
$( "#sortable"+tab_counter ).sortable().disableSelection();
updateTabs();
$.each(map, function() {
addcells(this,tab_counter);
});
tab_counter++;
var i = 0;
$('#tabs').find('li').each(function(){
$(this).data('tabIndex', i);
i++;
});
}
function updateTabs(){
$tabs.tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
var $tab_items = $( "ul:first li", $tabs ).droppable({
accept: ".connectedSortable li",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
var $item = $( this );
var $list = $( $item.find( "a" ).attr( "href" ) )
.find( ".connectedSortable" );
ui.draggable.hide( "slow", function() {
$tabs.tabs( "select", $tab_items.index( $item ) );
$( this ).appendTo( $list ).show( "slow" );
});
}
});
}
$(function() {
$( "#sortable1, #sortable2, #sortable3 , #sortable4" ).sortable().disableSelection();
updateTabs();
$("#tabrenamedialog_layer").dialog({
autoOpen: false,
modal: true,
height: 300,
width: 300,
buttons: {
"Rename Tab": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
bValid = bValid && checkLength( tabrename, "tabrename", 3, 14 );
// bValid = bValid && checkRegexp( tabrename, /^[a-z]([0-9a-z_' '])+$/i, "Tab name may consist of a-z, 0-9, underscores, begin with a letter." );
if ( bValid ) {
$('#'+tabid).html(tabrename.val());
//alert();
$( this ).dialog( "close" );
}
},
Cancel: function() {
$( this ).dialog( "close" );
},
"Delete Tab": function(){
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
var index = tabid.replace( /\D/g , "" );
index = parseInt(index);
alert(index);
$tabs.tabs( "remove",index -1);
var i = 0;
$('#tabs').find('li').each(function(){
$(this).data('tabIndex', i);
i++;
});
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
});
var $tab_title_input = $( "#tab_title")
var $dialogadd = $("#addtabdialog_layer" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Add: function() {
addTab();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
open: function() {
//$tab_title_input.focus();
},
close: function() {
// $form[ 0 ].reset();
}
});
</script>
Leave a comment on thermyte's reply
Re: Bug with tabs and sortable
2 years ago
Without digging too deeply into your code, I noticed that you aren't storing the indexes when you first create the tabs. You will want to do it there, so that any function that tries to reference it after has the original values. If this doesn't solve your issue, let me know and I will look a little closer.
Re: Bug with tabs and sortable
2 years ago
thanks for the reply, i am trying to implment this. but i guess i am missing some information.
Where do you add the code, to store the index's and what is the code :~ sorry i dont get this part.
do you have a working example?
Rg & Thanks.
Ronen
Where do you add the code, to store the index's and what is the code :~ sorry i dont get this part.
do you have a working example?
Rg & Thanks.
Ronen
Leave a comment on thermyte's reply
Re: Bug with tabs and sortable
2 years ago
Here is a simple example of what I am doing:
- <script language="JavaScript">
- var nextTab = 3;
- function activateTabs(){
- $('#tabs').tabs( {
- tabTemplate: '<li id="#{label}"><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
- add: function(event,ui){ $('#tabs').tabs('select', ui.index); }
- } );
- storeTabIndexes();
- }
- function makeTabsSortable(){
- $('#sortableTabs').sortable();
- }
- function addTab(){
- url = 'tabTemplate.cfm?contextless=1';
- $('#tabs').tabs('add', url, 'tab' + nextTab);
- nextTab++;
- storeTabIndexes();
- }
- function closeTab($tab){
- var index = $tab.data('tabIndex');
- $('#tabs').tabs('remove', index);
- storeTabIndexes();
- }
- function storeTabIndexes(){
- var i = 0;
- $('#tabs').find('li').each(function(){
- $(this).data('tabIndex', i);
- i++;
- });
- }
- $(function(){
- activateTabs();
- makeTabsSortable();
- $('#addTab').bind('click',addTab);
- $('#tabs span.ui-icon-close').live('click', function(){ closeTab($(this).parent()); });
- });
- </script>
- <a href="" id="addTab" onclick="return false;">[add tab]</a>
- <div id="tabs">
- <ul id="sortableTabs">
- <li id="tab1"><a href="tabTemplate.cfm?contextless=1">tab1</a><span class="ui-icon ui-icon-close">Remove Tab</span></li></li>
- <li id="tab2"><a href="tabTemplate.cfm?contextless=1">tab2</a><span class="ui-icon ui-icon-close">Remove Tab</span></li></li>
- </ul>
- </div>
I hope this helps.
Re: Bug with tabs and sortable
2 years ago
hi,
thanks for the code, it helped me move forward.
have a different problem wrong, it removes the wrong tab div. not the correct corresponding id.
can have a look on the following link.
it gives alert on the tab-id it is going to delete and the index it is going to delete.
hope you can find some information.
i can upload a bug video... later on.
Re: Bug with tabs and sortable
2 years ago
thanks for the reply.
i have made the changes as you proposed. The 'remove' is removing the wrong tab-id with the content...
hope you see what this is happing.
Thank you in advance.
Leave a comment on thermyte's reply
Re: Bug with tabs and sortable
2 years ago
Sorry, I don't have the time to fully work on this, but looking at your code I noticed a couple of things that might be issues. First, make sure that you put all of your jQuery calls that are not in functions in the $(function(){ //jquery code here }); I don't think that is causing this problem, but its best practice and ensures that any jQuery waits for the document load before executing.
I also noticed that you aren't storing the indexes when you create the tabs ($( "#tabs").tabs). This is very likely the issue. Make sure that you call the storeTabIndexes() function when you initiate the tabs, so that the indexes initial values are stored.
In addition to this, the tabTemplate in the initiation does not give new tabs that you create an id. If you don't do this, the <li> wont have an id that you can reference to store the index on newly created tabs.
Leave a comment on thermyte's reply
Re: Bug with tabs and sortable
6 months ago
Hello,
I have the exact same problem. When I try to remove one tab "A" with the index it removes tab B or else.
This only occurs after sorting the tabs.
I saw your workaround thermyte but before I try implementing it I'd like to check out with those who will read this mail, if this problem is still running. (I mean I may have something wrong elsewhere...)
When browsing the web on the subject it seems that this issue is quite old...
Any comment ?
Regards,
I have the exact same problem. When I try to remove one tab "A" with the index it removes tab B or else.
This only occurs after sorting the tabs.
I saw your workaround thermyte but before I try implementing it I'd like to check out with those who will read this mail, if this problem is still running. (I mean I may have something wrong elsewhere...)
When browsing the web on the subject it seems that this issue is quite old...
Any comment ?
Regards,
Leave a comment on obin's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to voxen.jquery's problem
{"z21143379":[14737000003673153],"z2975490":[14737000001042660,14737000001049067,14737000001060625],"z4673177":[14737000001545219,14737000001560132],"z4209987":[14737000001123847],"z4786751":[14737000001551559,14737000001569071,14737000001876902,14737000001889053,14737000001901188],"z4277290":[14737000001867139,14737000001878452,14737000001891789,14737000001893341]}
Statistics
- 15 Replies
- 4742 Views
- 6 Followers
