Browse: Home / / jQuery tabs and cookies

jQuery tabs and cookies

By Carlo on 2008-04-11

I’ve found many examples of scripts that save the selected tab inside a cookie but none of them worked out of the box… so let me write here a note and a snippet about how I got it working (big thanks to Massimiliano).

The XHTML that the snippet refers to is available on http://docs.jquery.com/UI/Tabs#source (you have to use its CSS or one of the same kind, of course).

You also need to include

  • ui.base.js
  • ui.tabs.js
  • jquery.cookie.js

The snippet (quick, dirty and raw… but working) is:


$(document).ready(function(){
  var tab_cookie_id = parseInt($.cookie("the_tab_cookie")) || 0;
  $("#example > ul").tabs({
    selected: tab_cookie_id,
    show:     function(ui) {
      var murl   = ui.tab;
      var nurl   = murl.toString().split("#");
      var ourl   = nurl[1].split("-");
      var tab_id = --ourl[1];
      $.cookie("the_tab_cookie", tab_id);
    }
  });
});

Last update: 2008-06-11

Posted in | Tagged ,

10 responses to “jQuery tabs and cookies”

  1. Dave
    Dave
    2008-08-09 at 12:09 pm | | Reply

    This line:
    show: function(ui) {
    should be:
    show: function(junk,ui) {
    for jquery 1.2.6 I believe. The ui object is now the second parameter.

  2. Alien Y
    Alien Y
    2008-08-15 at 09:51 am | | Reply

    fix some…
    work with jQuery 1.2.6 and ui-Tabs 1.5

    var tab_cookie_id = parseInt($.cookie(“the_tab_cookie”)) || 0;
    $(“#container-1 > ul”).tabs({
    selected: tab_cookie_id,
    show: function(e, ui) { var tab_id = ui.index; $.cookie(“the_tab_cookie”, tab_id, { expires: 30}); }
    });

  3. Alien Y
    Alien Y
    2008-08-15 at 02:55 pm | | Reply

    I rewrite for ui Tab3.0 + jQuery 1.2.6

    var tab_cookie_id = parseInt($.cookie(“the_tab_cookie”)) || 0;

    $(“#container-1 > ul”).tabs({
    selected: tab_cookie_id,
    select: function(e, ui) { if (ui.index == 0 && tab1_use_ == 1) {/* do some thing */}
    },
    show: function(e, ui) { var tab_id = ui.index; $.cookie(“the_tab_cookie”, tab_id, { expires: 30 }); }
    });

  4. Carlo
    Carlo
    2008-08-15 at 07:00 pm | | Reply

    Dave, Alien Y: thanks… I’m going to try your snippets as soon as possible and perhaps that could lead me to release an updated version of my code.

  5. PP
    PP
    2008-10-14 at 08:55 pm | | Reply

    thx Alien Y :)

  6. Marian Bida
    Marian Bida
    2008-10-20 at 02:57 pm | | Reply

    Don’t try it, just use it, it is working good..

  7. Nick Clarke
    Nick Clarke
    2009-01-15 at 05:13 pm | | Reply

    Just to let you know this is now built into the current release for tabs. To use all I had to do was:

    $(‘#example > ul’).tabs({cookie: {expires: 7}})

    Hope this helps

    1. Carlo
      Carlo
      2009-01-15 at 10:36 pm | | Reply

      Nick: that’s good news. Thank you.

  8. Michele
    Michele
    2009-09-15 at 08:13 am | | Reply

    Nick: I have been looking for this for soooo long!Simple and straightforward. Thank you.

  9. the666bbq
    the666bbq
    2009-10-31 at 02:30 am | | Reply

    hallelujah … I’ve spent too much time on the named cookie thing too ;-) I’m a jQuery evangelist whenever I can but the documentation on how to use custom named cookies (instead of ui-tabs-something) is not sufficient if you ask my opinion ;-) . This snippet is exactly what I needed … thanks guys.

    what is that ’something’-integer in “ui-tabs-something” anyway … it comes from $.data(this.list[0]) but who/where/what is that set ??

    wouldn’t it be nice if we could just ’set’ the cookie name to be used “out of the box” (and if we develoeprs are lazy or not in need for flexibility the plugin can use the default ui-tabs-whatever)

    Peter

Leave a Reply