Sort & Save ordering of JqueryUI Tab: An hack


Back Again…

Few days back i was searching for JqueryUI tab sorting and get the sort order. And as we all know, this can only be possible by using sortable plugin that JqueryUI provides.
i.e. $(this).sortable(‘serialize’);

But, this code will fail in case of tab and you will not get the sort order, instead you will get `undefined`. Yeah, its a bug in ui.sortable.js.

So i came up with the hack to get the sort order of tab, the easy way.
Here we go, below is the tab html we are going to create.

<div id="tabs">
<ul>
<li id="li-1"><a id="a-1" href="#tabs-1">Nunc tincidunt (a-1)</a></li>
<li id="li-2"><a id="a-2" href="#tabs-2">Proin dolor (a-2)</a></li>
<li id="li-3"><a id="a-3" href="#tabs-3">Aenean lacinia (a-3)</a></li>
</ul>
<div id="tabs-1">
<p>Lorem Ipsum</p>
</div>
<div id="tabs-2">
<p>Dolor Sit</p>
</div>
<div id="tabs-3">
<p>Amet</p>
</div>
</div>

In order to convert above div structure into tabbed interface. we need to add
jquery.js, ui.code.js, ui.tabs.js, ui.sortable.js and finally theme css, ui.all.css, ui.tabs.css etc.

Now create tabbed interface using following code and make tabs sortable,

$("#tabs").tabs().find("ul").sortable({
        axis : "x",
        update: function (e, ui) {
              var csv = "";
             $("#tabs > ul > li > a").each(function(i){
                  csv+= ( csv == "" ? "" : "," )+this.id;
             });
             alert(csv);
        }
});

Above i have added update callback function which is been called whenever we will drag and drop tab from one position to another. And we get the id of tabs in proper order in CSV  format.

That’s it. Now go and explode that CSV value using comma in any scripting language like php, and save the array index in database to intact the sort order.

see the DEMO

Happy Coding…  🙂

Advertisements

4 thoughts on “Sort & Save ordering of JqueryUI Tab: An hack

  1. Hi Amit,

    This is an email about autocomplete plugin that s listed on loopj.com. I saw that you had a working demo of it and hence thought of dropping you an email.

    I am trying to make the same plugin work. However, I am running out of luck for this error.

    value is undefined in jquery.tokeninput.js on Line: 482

    Will you mind helping me out with this issue?

    Thanks,
    Yogesh

    • Hi Yogesh,
      Are you using my jquery.tokeninput.js? Try using mine. Otherwise, mail me your js file so that i can track the error on the same line number you specified.

  2. Hi, Thanks for the reply. I tried using your jquery.tokeninput.js but I am still getting the same error.

    Strange thing is, when I see the request and response from Firebug’s NET tab, I am getting back a list of names from the server,just that it’s not appearing in input box as list.

    Can you provide your email address to me so that I can mail you the file.

    Thanks,
    Yogesh

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s