CODEWITHSUNDEEP
jqueryjquery-uicookiestabs
Daniel S
Daniel S

Reputation: 609

Can't make jQ UI tabs work w/ cookie after jQ/UI upgrade

I have this piece of code, that uses cookies to make jquery tabs selection persist trough refresh

The problem is that it only works with jQuery UI 1.7.2 and jQuery JavaScript Library v1.4.1

If i update to jQuery UI - v1.10.0 and jQuery JavaScript Library v1.9.0, it doesn't persist anymore (no errors, just not persisting tab selection across page loads)

Anyone know why ?

Here is the code

$( function(){
  var cookieName = 'stickyTab';
  $( '#tabs' ).tabs( {
     selected: ( $.cookies.get( cookieName ) || 0 ),
     select: function( e, ui ){
       $.cookies.set( cookieName, ui.index );
     }
  } );
} );

in my html i have

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.cookies.js"></script>

cookie is provided by http://code.google.com/p/cookies/

Upvotes: 2

Views: 833

Answers (1)

JAAulde
JAAulde

Reputation: 19560

The cookie code is fine, but the jQuery UI Tabs API has changed with your upgrade.

  1. selected is no longer a valid option--it has been renamed to active.
  2. select is no longer a valid event--it has been changed to activate.
  3. The index property of the ui param which gets passed into activate has been removed, leaving more work to be done to figure out which tab just went active.

Here is a live demo of the new API in use: http://jaaulde.com/test_bed/stickytabNewAPI/

And here is the specific JS:

    $(function () {
        var cookieName = 'stickyTabNewAPI',
            $tabs = $('#tabs'),
            $lis = $tabs.find('ul').eq(0).find('li');

        $tabs.tabs({
            active: ($.cookies.get(cookieName) || 0),
            activate: function (e, ui) {
                $.cookies.set(cookieName, $lis.index(ui.newTab));
            }
        });
    });

I can understand the name change from select to activate, etc. I do not, however, understand why they dropped the index property of the ui param. It makes for more work...

Upvotes: 3

Related Questions