Question

I am using the jQuery UI tabs interface and I want to set a cookie (using the jquery.cookie.js script they recommend, from stilbuero.de/jquery/cookie/) to remember which tab was last selected when the page is refreshed. That much was easy, going by the instructions at jqueryui.com.

In context, these tabs are going to display search results from a form. I’d like to go a step further and delete the cookie when the form is submitted, so that the default tab is available again when a new search term is submitted. This part isn’t going so well. It doesn’t help that the examples given on jqueryui.com and stilbuero.de are completely different and they don’t really jive with each other. I’ve never dealt with cookies before and I don’t comprehend jQuery enough to develop it from scratch, so any help would be great.

Here’s my tabs:

<div id="selector" class="ui-mainColTabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
</div>

Here’s the form:

<form id="form">
    <input type="submit" value="kill cookie" />
</form>

A link to check that the cookie is set:

<a href="#" class="getCookie">get cookie</a>

And finally the jQuery that I’ve got so far:

// slightly altered example code from jqueryui.com
// init tab ui, set cookie
$("#selector").tabs({
    cookie: {
        expires: 30
    }
});
$(".ui-tabs-nav, .ui-tabs-nav > *")


// slightly altered example code from stilbuero.de
var COOKIE_NAME = 'test_cookie';
var ADDITIONAL_COOKIE_NAME = 'additional';
var options = { path: '/', expires: 10 };

// get cookie
$('a.getCookie').click(function() {
    alert($.cookie(COOKIE_NAME));
    return false;
});

// kill cookie
$('#form').submit(function() {
    $.cookie(COOKIE_NAME, null, options);
    return false;
});

Help me Obi-Wan Kenobi. You’re my only hope.

Answer 1

Okay, nevermind. I figured it out. Here’s the new, working code:

<div id="selector" class="ui-mainColTabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
</div>

<form id="form">
    <input type="submit" value="Kill" />
</form>

<a href="#" id="getCookie">Get</a>

<script type="text/javascript">
<!--
$(document).ready(function() {
    $("#selector").tabs({
        cookie: {
            name: 'tab_cookie',
            expires: 7
        }
    });
    $(".ui-tabs-nav, .ui-tabs-nav > *")

    $('#getCookie').click(function() {
        alert($.cookie('tab_cookie'));
    });

    $('#form').submit(function() {
        $.cookie('tab_cookie', null);
    });
});
//-->
</script>

The issue was that I couldn’t figure out how to identify the cookie I was trying to work with. But just out of sheer dumb luck, I tried plugging in a “name” option. Kind of frustrating that jqueryui.com doesn’t mention anything about that. Hopefully this may help someone else with the same problem.

So I guess it turns out I’m Obi-Wan. Go me.