How to remember active tab using the current version of jquery ui

Question

When my page refreshes I want to be able to get back to the tab the user was last on. The current api documentation does not mention cookies anymore to do the tab selection anymore. How would one go about doing this now with cookies now?

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery UI Tabs - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
        <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
            $(function() {
                $("#tabs").tabs();
            });
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
                <li><a href="#tabs-3">Aenean lacinia</a></li>
            </ul>
            <div id="tabs-1">
                <p>Tab 1 text</p>
            </div>
            <div id="tabs-2">
                <p>Tab 2 text</p>
            </div>
            <div id="tabs-3">
                <p>Tab 3 text</p>
            </div>
        </div>
    </body>
</html>

You have several options. You can use cookies, sessions, the history api, local storage or session storage. All of these are solutions, generally used injunction with each other for fallback. — Ohgodwhy, Feb 07 '13 at 21:23
You can also use the hash which would allow deep linking into tabs. — Kevin B, Feb 07 '13 at 21:26
See my answer in related question http://stackoverflow.com/a/18576231/268351 — Jeff, Sep 02 '13 at 15:07

score 6 · Accepted Answer · answered Feb 07 '13 at 22:14

6

So here is what I came up with. When a user activates a tab a cookie will be set with the index of the selected tab. When the tab widget is initialized the value is read from the cookie and loaded. This seems to be working even if the cookie does not exist and only loads the tab the user last selected when a cookie exists.

$("#tabs").tabs({
    activate: function( event, ui ) {
        $.cookie("tabs_selected", $("#tabs").tabs("option","active"));
    },
    active: $("#tabs").tabs({ active: $.cookie("tabs_selected") })
});

answered Feb 07 '13 at 22:14

Manuel Quinones

4,196
1
19
19

jQuery UI 1.9 and no working..... how sure you are that it is correct? – takacsot Apr 09 '13 at 09:49
it is not working for me too – May May 06 '13 at 15:47
Make sure you have the jquery cookie plugin added. – Manuel Quinones May 06 '13 at 17:36

score 0 · Answer 2 · edited Feb 07 '13 at 22:16

0

$("#tabs").tabs({ cookie: { expires: 30} });

edited Feb 07 '13 at 22:16

ollo

24,797
14
106
155

answered Feb 07 '13 at 21:59

whitneyit

1,226
8
17

1

Thanks but the cookie option was deprecated as of jQuery UI 1.9 – Manuel Quinones Feb 07 '13 at 22:10

score 0 · Answer 3 · answered Mar 11 '14 at 20:15

0

you can edit jquery-ui.js file

open the file
search for this.anchors.bind("click.tabs",function(){return!1})}
replace with this.anchors.bind("click.tabs",function(){})}

refresh your page and it's all right

answered Mar 11 '14 at 20:15

Mohamed Melouk

182
2
11

How to remember active tab using the current version of jquery ui

3 Answers3