jquery ui tabs no longer supporting cookie? now what?

I apologize for this being an open ended question, but I am at a loss.

Since version 1.9 of the jquery UI, they depreciated using the cookie option in order to save the active state of tabs across multiple pages. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

I haven't seen ANY other documentation out there on how to accomplish this now! So I am left scratching my head.

My best guess would be to use some sort of event to create a cookie, then load the cookie? Or is there some OTHER way to save the active state of the tabs across multiple pages and by user preference?

Solution 1:

Had the same issue bite me today. Here is what seems to work:

1. Use jquery.cookie plugin (https://github.com/carhartl/jquery-cookie) (This step is not necessary, but it makes the life easier dealing with cookies)

2. Use the following code fragment:

   $( ".selector" ).tabs({
       active   : $.cookie('activetab'),
       activate : function( event, ui ){
           $.cookie( 'activetab', ui.newTab.index(),{
               expires : 10
           });
       }
   });
   

This sets a cookie called "activetab" which expires after 10 days (refer to jquery.cookie documentation for more options) to remember the currently selected tab whenever any tab is clicked. This cookie is read at the initialization time to display the last saved tab. The first time the page is visited, the tabs will be collapsed.

Solution 2:

Short, layout-independent way of doing this using localStorage:

$("#tabs").tabs({
  active: localStorage.getItem("currentIdx"),
  activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
  }
});

A layout-specific way of doing it using custom data attributes (possibly useful if the attribute values were to be used in some way elsewhere in your script).

jQuery UI:

$("#tabs").tabs({
    active: localStorage.getItem("currentTabIndex"),
    activate: function(event, ui) {
        localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]);
    }
});

Example HTML layout:

<div id="tabs">
    <div id="tabs-1" data-tab-index="0">
       tab 1 stuff...
    </div>
    <div id="tabs-2" data-tab-index="1">
       tab 2 stuff...
    </div>    
    <div id="tabs-3" data-tab-index="2">
       tab 3 stuff...
    </div>
</div>

Solution 3:

event tabsactivate and then store to sessionStorage or localStorage.

$(function() {
    var selectedTabId = sessionStorage.getItem("selectedTab");
    selectedTabId = selectedTabId === null ? 0 : selectedTabId; //your default being 0
    $("#tabs").tabs({
        active: selectedTabId,
        activate : function( event, ui ) {
            selectedTabId = $("#tabs").tabs("option", "active");
            sessionStorage.setItem("selectedTab", selectedTabId);
        }
    });
});

Solution 4:

Using localStorage feature of HTML5 gives the solution for the problem, and is now the recommended way to do this type of thing. Cookies cause extra data to be added to every web request and response.

You'll find that localStorage is supported by browsers as archaic as IE8, and if you really really want support for IE6 and IE7, there is a shim to do that.

HTML

<div class="mytab" id="mytab_1">
 <ul>....</ul>
 <div id="xx1">...</div>
 ...
</div>

JS

currTabIndex=sessionStorage['mytab_1'];

And the tabfuntion call

$('.mytab').tabs({
 active:currTabIndex,
 load:function(event,ui){
  sessionStorage[''+this.id]=(ui.panel.index()-1);
 }
});

Hope this would be helpful.

Solution 5:

Simply:

activate: function(event, ui) {        
    localStorage.setItem("accIndex", $(this).tabs("option", "active"))
},
active: parseInt(localStorage.getItem("accIndex"))