Search code examples
jqueryjquery-uicookiesaccordionjquery-ui-accordion

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


I have this piece of code, that uses cookies to make jquery accordion 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 accordion selection across page loads)

Here is the code

$( function()
{
    var cookieName = 'stickyAccordion';

    $( '#accordion' ).accordion( {
        active: ( $.cookies.get( cookieName ) || 0 ),
        change: function( e, ui )
        {
    $.cookies.set( cookieName, $( this ).find( 'h3' ).index ( ui.newHeader[0] ) );
        }
    } );
} );

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/


Solution

  • The cookie code is fine, but the jQuery UI Accordion API has changed with your upgrade such that change is no longer a valid event--it has been changed to activate. We can also adjust the activate method's body to be more efficient than re-querying for the headers every time.

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

    And here is the specific JS:

    $(function () {
        var cookieName = 'stickyAccordionNewAPI',
            $accordion = $('#accordion'),
            $headers = $accordion.children('h3');
    
          $accordion.accordion( {
              active: ($.cookies.get(cookieName ) || 0),
              activate: function (e, ui) {
                  $.cookies.set(cookieName, $headers.index(ui.newHeader));
              }
          });
    });
    

    It's not quite as drastic a change as UI Tabs underwent, but a change nonetheless.