why are my jquery cookies not available across multiple pages?

Question

This week I have researched and put together some jquery (it's my first time working with jquery) to control a collapsible menu in a custom WordPress sidebar.php file. The menu is dynamically generated, using wp_query to select and sort custom post types by custom taxonomies and custom sort orders, etc. (so there is no plugin solution).

I want to maintain the expand/collapse state of my menu sections as site visitors navigate the content. Using jquery it appears I am successfully writing unique cookie names to the browser, and it appears I am successfully passing the "expanded" or "collapsed" class values of my tags.

However, the cookies don't work across multiple pages - if you navigate to another page, no new cookies are set until you click a menu item. If you hit the back browser and return to the previous page, your cookies set on the previous page are still set (which is good). Note that when navigating to a new page the menu DOES get regenerated, but the menu content rarely changes (so IDs are stable) and the cookies are only for the current session (and should still be held over from the previous page(s)).

I've experimented with setting PHP cookies, and they hold up nicely from page to page. But my jquery cookies seem to be page-specific, so I'm doing something wrong.

Here's the jquery code that appears in my PHP page to control the menu and write my cookies (NOTE: I am linking to the jquery.cookie.js plugin):

        <script type="text/javascript">
        $(document).ready(function() {
            setTimeout(function() {
                $('#port-menu > li > a.expanded + ul, #port-menu > li ul li > a.collapsed + ul').slideToggle('medium');
                $('#port-menu > li > a').click(function() {
                    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
                    var vartag = $(this).get(0).tagName.toLowerCase();
                    var varclass = $(this).attr('class');
                    var cookiename = $(this).parent().attr('id');
                    $.cookie(cookiename, $(this).attr('class'));
                });
                $('#port-menu > li ul li > a').click(function() {
                    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
                    var vartag = $(this).get(0).tagName.toLowerCase();
                    var varclass = $(this).attr('class');
                    var vargenre = $(this).parent().parent().parent().attr('id');
                    var varoutlet = $(this).parent().attr('id');
                    var cookiename = vargenre + varoutlet;
                    $.cookie(cookiename, $(this).attr('class'));
                });
            }, 250);
        });
    </script>

As an example, the dynamically created cookie names and values look something like this:

genre2 : collapsed

genre3 : expanded

genre1outlet2 : expanded

genre2outlet3 : expanded

genre2outlet4 : expanded

As mentioned above, I'm new to jquery. I'm also new to using cookies. Any help would be greatly appreciated.

P.S. Once I get this working, I have no idea how to get the info from my array of cookies and apply the classes to my menu - but that's a separate issue.

Answer 1

I think you should try to specify a path. It could look like this:

$.cookie(cookiename, $(this).attr('class'), { path: '/' });

Then when you set cookie once it will be availabe for all website. Default path is the path of subpage which set cookie. In that case cookie is available only for that subpage.

This rule (I mean with paths) applies to cookies in general. Not only those created by jQuery.