Question

I have a web application (ASP.NET MVC3) which uses the jquery ui tab control with the cookie plugin (as demonstrated here).

I set the path of the cookie using the path option when the tab is created:

$("#tabs").tabs({ cookie: { path: '/A/' } });

In firefox this works correctly. No matter what the url is after “/A/” (ex “A/B/C”) the tab control always correctly remembers which tab was last selected and switches to it when I re-load the page.

However, on Chrome (v21), occasionally the browser will add another tab cookie with a different path. I then end up with two cookies, one with the path “/A/” as I originally created, and another one with the path “/A/B/” which is the url I am currently on. Unfortunately, it seems that this “double cookie” causes the wrong tab to sometimes load when the page is refreshed, since the two cookies seem to conflict.

Is there any way to prevent this behaviour in chrome? I’ve tried several programatic solutions (such as forcing the path to “/A/” if the path contains “/A/”, but as that code is never reached it seems chrome is doing it automatically).

Thanks for the help!

Seems the problem was that chrome doesn’t differentiate between cookies with the same name on different paths; so the other tab control I had in my application was messing things up. Once I gave the cookie a unique name things started working properly!

Answer 1

I’ve just pushed an example to the GitHub repository.
Seems it’s working well in my Chrome 21 under Linux.

Screenshot of first path

Screenshot of second path

If you’re using jQuery UI >= 1.7 then add property “name” with some unique value like “my-absolutely-unique-cookie” to your cookie object you’re passing and look how it goes:

$("#tabs").tabs({
    cookie: {
        name: 'my-unique-cookie',
        // store cookie for a day, without, it would be a session cookie
        expires: 1,
        path: '/tabs'
    }
});