Multiple jQuery UI tabs + connected sorters not working properly

Question

I am using jQuery 1.8.2 and jQuery UI 1.9.0.

The following is an extension of the sortable demo on the jQuery UI Tabs Demo page with two sets of tabs + sortable linked to each other http://jsfiddle.net/sujay/cUDLF/ .

The move works fine, but even after refresh tabs do not work as expected.

To reproduce the problem, try moving the unselected tab from the upper set to the lower set and then select it.

You will see that the tab and panel have been moved to the lower set (the selection of the lower set will not be selected). But when you select the top-level tabs are not selected.

Update

Now I can make it work. Check out http://jsfiddle.net/cUDLF/6/ .

But the sine receive event only receives the absolute position, not the index. position is lost. It is always added to the end of the list of tabs.

If you find the index, the problem will be solved.

Answer 1

I finally found a way to solve this problem.

A working solution can be found at http://jsfiddle.net/cUDLF/12/ .

Thanks to the tip in this answer .

The receiving fragment looks like

  receive: function (event, ui) { var receiver = $(this).parent(), sender = $(ui.sender[0]).parent(), tab = ui.item[0], tab$ = $(ui.item[0]), // Find the id of the associated panel panelId = tab$.attr( "aria-controls" ), insertBefore = document.elementFromPoint(event.pageX,event.pageY); tab$ = $(tab$.removeAttr($.makeArray(tab.attributes). map(function(item){ return item.name;}). join(' ')).remove()); tab$.find('a').removeAttr('id tabindex role class'); if(insertBefore.parentElement == tab){ insertBefore = document.elementFromPoint(event.pageX + insertBefore.offsetWidth, event.pageY); } insertBefore = $(insertBefore).closest('li[role="tab"]').get(0); if(insertBefore) tab$.insertBefore(insertBefore); else $(this).append(tab$); $($( "#" + panelId ).remove()).appendTo(receiver); tabs.tabs('refresh'); } 

Let me know if you find any problems with this approach.

Answer 2

Replace:

 tabs.tabs( "refresh" ); 

with:

 tabs.tabs('destroy'); tabs.tabs(); 

Answer 3

Here is a working example: http://jsfiddle.net/5qY5B/

The workaround is to block the event when the tabs change, if newTab and oldTab are from another tab container :)

Example:

insted from this:

 var tabs = $( "#tabs_1, #tabs_2" ).tabs(); 

use this ( Updated ):

 var tabs = $( "#tabs_1, #tabs_2" ).tabs({ beforeActivate : function( event, ui ) { if(ui.oldTab.parent().parent().attr("id") != ui.newTab.parent().parent().attr("id")) { if( $( this ).tabs( "option", "active") == -1) $( this ).tabs( "option", "active", 0); // NEW return false; } } }); 

Answer 4

This seems to work for getting:

  tabs.tabs("destroy"); $( "#" + panelId ).appendTo(receiver); tabs.tabs(); 

Demo here http://jsfiddle.net/nxtwrld/yxgUR/1/