Jquery Tool: Keep selected tab on refresh or save data

Question

I am using jquery tool for tab Ui,

Now I want to keep tab selected on page reload. Is there any way to do that? below is my code

$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});

Answer 1

Here is a simple implementation of storing the cookie and retrieving it:

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Then, to save/retrieve cookie data with jQuery UI Tabs:

$(function() {
   // retrieve cookie value on page load
   var $tabs = $('ul.tabs').tabs();
   $tabs.tabs('select', getCookie("selectedtab"));

   // set cookie on tab select
   $("ul.tabs").bind('tabsselect', function (event, ui) {
      setCookie("selectedtab", ui.index + 1, 365);
   });
});

Of course, you'll probably want to test if the cookie is set and return 0 or something so that getCookie doesn't return undefined.

On a side note, your selector of ul.tabs may be improved by specifying the tabs by id instead. If you truly have a collection of tabs on the page, you will need a better way of storing the cookie by name - something more specific for which tab collection has been selected/saved.

UPDATE

Ok, I fixed the ui.index usage, it now saves with a +1 increment to the tab index.

Here is a working example of this in action: http://jsbin.com/esukop/7/edit#preview

UPDATE for use with jQuery Tools

According the jQuery Tools API, it should work like this:

$(function() {
   //instantiate tabs object 
   $("ul.tabs").tabs("div.panes > div");

   // get handle to the api (must have been constructed before this call)
   var api = $("ul.tabs").data("tabs");

   // set cookie when tabs are clicked
   api.onClick(function(e, index) {
          setCookie("selectedtab", index + 1, 365);
   });     
   // retrieve cookie value on page load
   var selectedTab = getCookie("selectedtab");

   if (selectedTab != "undefined") {
    api.click( parseInt(selectedTab) ); // must parse string to int for api to work
   }

});

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Here is a working (unstyled) example: http://jsbin.com/ixamig/12/edit#preview

Here is what I see in Firefox when inspecting the cookie from the jsbin.com example:

Answer 2

This is what worked for me... at least I haven't run into any issues yet:

$('#tabs').tabs({
            select: function (event, ui)
            {
                $.cookie('active_tab', ui.index, { path: '/' });
            }
        });
$('#tabs').tabs("option", "active", $.cookie('active_tab'));

I'm using: jQuery 1.8.2, jQuery UI 1.9.1, jQuery Cookie Plugin.

I set the "path" because in C# I set this value in a mvc controller which defaults to "/". If the path doesn't match, it wont overwrite the existing cookie. Here is my C# code to set the value of the same cookie used above:

Response.Cookies["active_tab"].Value = "myTabIndex";

Edit: As of jQuery UI 1.10.2 (I just tried this version, not sure if it's broken in previous versions), my method doesnt work. This new code will set the cookie using jQuery UI 1.10.2

 $('#tabs').tabs({
     activate: function (event, ui) {
         $.cookie('active_tab', ui.newTab.index(), { path: '/' });
     }
 });

Answer 3

The easiest way to survive between page refresh is to store the selected tab id in session or through any server-side script.

Only methods to store data on client side are: Cookies or localStorage.

Refer to thread: Store Javascript variable client side