Jquery UI tabs ,the tab select is inconsistent after rearranging the tabs

Question

I am using Jquery UI tabs for a wizard applictaion .After rearranging the tabs (part of the client requirement),the select index is inconsistent.We cannot allow jquery sortable on the tabs since only some tabs can be rearranged and the tabs do have a context menu too.So I am using insertAfter and insertBefore commands after it is rearranged successfully at server side. In the fiddle the tabs are rearranged after button click :-

Jquery Tabs Fiddle

     $("#btn").click(function(){
     $("#tabs ul li:nth-child(3)").after($("#tabs ul li:nth-child(1)"));

 });

Refreshing the tabs after rearranging is not an option for us.Any help would be really appreciated

Answer 1

It seems to me the select event first, returns the active tab, and then changes which tab is active. You won't receive the correct value if that is the case. You should instead use the activate event:

 $(function() {
     $("#btn").click(function(){
         $("#tabs ul li:nth-child(3)").after($("#tabs ul li:nth-child(1)"));
     });
  });

$( "#tabs" ).tabs({
    activate: function(event,ui){
         var selected = $(ui.newTab).index();
         alert(selected);
    }
});

Here is the

You can use index instead of active to find which tab is which based on it's position in the DOM.