jquery ui tabs no longer supporting cookie? now wh

Question

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?

Answer 1

Simply:

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

Answer 2

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.

Answer 3

You can set the active tab using the active option such as

$( ".selector" ).tabs({ active: 1 });

There are many ways to pass values to a webpage other than cookies. You can use query parameters and hidden fields for example. You would then create an onload script that would read either example using jQuery's onload example. $(function () { }).

To read query strings check out this page which gives you the method

Jquery read query string

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

and to read a hidden field.

$( ".selector" ).tabs({ active: $('#my-hidden-fiel').val() });

I agree with jquery ui's decision to remove this feature as cookies should really only be used to persist sessions in my opinion and not form fields or tabs for example.

Answer 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.

Answer 5

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);
        }
    });
});

Answer 6

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>