How to reorder jquery UI tabs using $.fn.tabs and underscorejs _.wrap function

Vote count:

0

I am trying to recorder jquery tabs in this plunkr using jQuery UI $fn.tabs, I will be having the tabs to reorder declared in this function, The code snippet is below, I have used underscorejs wrap function to do it

$.fn.tabs = _.wrap( $.fn.tabs, function extendTabs( org, arguments ) {

        var movObject =  {"name": "fragment-3", "nextSibling": "fragment-2"}; 
        console.log( "calling tabs", this, arguments );
        // perform reordering here if needed

        var listItemTobeMoved = $("li[xe-for-section="+movObject.nextSibling+"]");
        var listItemTo = $("li[xe-for-section="+movObject.name+"]");

        listItemTo.insertBefore(listItemTobeMoved);

        org.apply( this, arguments );
    });


<div id="tabs">
  <ul>
    <li xe-for-section="fragment-1"><a href="#fragment-1"><span>One</span></a></li>
    <li xe-for-section="fragment-2"><a href="#fragment-2"><span>Two</span></a></li>
    <li xe-for-section="fragment-3"><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1" xe-section ="fragment-1">
    Tab 1
  </div> 
  <div id="fragment-2" xe-section="fragment-2">
    Tab 2
  </div>
  <div id="fragment-3" xe-section="fragment-3">
    Tab 3
  </div>
</div>

The initialization of tab works fine with the below code

$( "#tabs" ).tabs();

But when i pass the extra arguments, its failing to initialize and throwing an error like below:

$( "#tabs" ).tabs("select", 3);

ERROR:

Uncaught TypeError: Function.prototype.apply: Arguments list has wrong typescript.js:12 extendTabsunderscore.js:697 (anonymous function)(index):37 (anonymous function)

Basically the selecting of tab item fails, How to handle this. Thank you

asked 26 secs ago

Vinay

1,411

How to reorder jquery UI tabs using $.fn.tabs and underscorejs _.wrap function