jquery ui tabs no longer supporting cookie? now what?

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

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.