Jquery ui tabs no longer supports cookies? Now what?

Question

I apologize for the fact that this is an open question, but I'm at a loss.

Starting with version 1.9 of the jquery user interface, they are discounted using the cookie parameter to keep tabs active across multiple pages. http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option

I have not seen ANY other documentation on how to do this now! So I stay scratching my head.

My best guess is to use some kind of event to create a cookie and then load a cookie? Or is there some other way to keep tabs active on multiple pages and according to user preferences?

Answer 1

If the same question bit me today. Here is what works:

• Use the jquery.cookie plugin ( https://github.com/carhartl/jquery-cookie ) (This step is not required, but it makes cookies easier)

• Use the following code snippet:

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

This sets a cookie called "activetab", which expires in 10 days (see the jquery.cookie documentation for more options) to remember the selected tab at the moment when any tab is clicked. This cookie is read during initialization to display the last saved tab. When you first visit the page, the tabs will be minimized.

Answer 2

A short, mock-independent way to do this with localStorage :

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

---

A layout-specific way to do this using custom data attributes (perhaps useful if attribute values ​​were to be used somehow in another place in your script).

jQuery UI:

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

HTML layout example:

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

Answer 3

Using the localStorage HTML5 function provides a solution to the problem, and now the recommended way to do it. Cookies cause additional data to be added for each web request and response.

You will find that localStorage is supported by browsers as archaic as IE8, and if you really want to support IE6 and IE7, this is the gasket for that .

HTML

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

Js

 currTabIndex=sessionStorage['mytab_1']; 

And calling tabfuntion

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

Hope this will be helpful.

Answer 4

event tabsactivate, and then save 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 5

Simply:

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

Answer 6

You can set the active tab using the active option, for example

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

There are many ways to pass values ​​to a web page other than cookies. For example, you can use query parameters and hidden fields. Then you will create an onload script that will read any example using the jQuery download example. $ (function () {}).

To read the query strings, check out this page, which gives you a 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 read the hidden field.

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

I agree with jquery ui's decision to remove this function, since cookies should really only be used to save sessions in my opinion, and not to create fields or tabs, for example.