Tag Archives: open tab

How to Remember which Tab was Open with jQueryUI and Cookies CodeUnit 13 FEB 2013

jqueryui logoIt is often quite useful on page reload or when coming back to a previously visited page, to open up that page with the last tab that was being viewed still activated. In the past jQuery UI tabs made this fairly easy through browser cookies being baked into the tabs initialization call.

Unfortunately, with the release of jQuery UI 1.10, the cookie option for tabs has been deprecated, rendering all your previous statements that looked like this, pretty much useless:

$("#mytabs").tabs({
cookie: {
name: 'mytabs',
expires: 1
}
});

From the official upgrade path notes:

Support for cookies is not part of the core functionality for tabs and there are many ways to manage state across page loads. Therefore, the cookie option has been deprecated in favor of setting the active option appropriately during initialization.

Luckily for us though, just because native tab support for cookies is gone doesn’t mean that we can’t still remember which tab was open using cookies – we just need to alter our approach first!

The idea is simple enough. As before, use a cookie to store the currently activated tab index. On load, if the cookie exists, activate the associated tab index. If it doesn’t exist, load the first one. Finally, on tab activate, update the cookie with the new index value.

In practice:

var tabCookieName = "mytabs";
$("#mytabs").tabs({
active : ($.cookie(tabCookieName) || 0),
activate : function( event, ui ) {
var newIndex = ui.newTab.parent().children().index(ui.newTab);
$.cookie(tabCookieName, newIndex, { expires: 1 });
}
});

Simple, but works like a charm!

jQuery UI: Remember Your Open Tab CodeUnit 25 NOV 2010

The jQuery UI library is a brilliant collection of official jQuery UI widgets and effects, one of them being the extremely useful Tabs widget.

Tabs allows you to shorten a page by placing bits of a page’s content into their own little “tabs”, which can be access by clicking on the tab header. A brilliant space saving mechanism and one that has become quite commonplace in applications these days.

Sometimes it is nice to remember what tab you currently have open so that when you travel to some other part of a site and then return to your original page, you want it to remember which tab you had currently selected.

Thankfully achieving this with jQuery UI’s tabs implementation is particularly easy.

Say hello to good old browser cookies.

To implement this built in functionality, you will need to include over and above the required jquery-ui.js and jquery.js libraries, the jquery.cookie.js plugin at the head of your page. This simplifies interaction with browser cookies and also provides a path for the tabs widget to use in order to save its state.

With this down, enabling tab state caching is a simple as declaring the tabs with a valid “cookie” option declaration:

$("#tabs").tabs({
cookie: {
name: 'tabs',
expires: 1
}
});

And this it. Simple as pie really. Note the ‘name’ option passed to the cookie object. This is important as it allows you to have different cookies for your different tabs instantiations on the site.

Useful, eh? ;)