Проблема с вкладками jQuery UI и опцией Cookie - PullRequest
Новая
       19

Проблема с вкладками jQuery UI и опцией Cookie

2 голосов
/ 16 сентября 2010

Я использую интерфейс вкладок jQuery UI , и я хочу установить cookie (используя сценарий jquery.cookie.js, который они рекомендуют из stilbuero.de/jquery/cookie/), чтобы запомнить, какая вкладкапоследний раз выбирался при обновлении страницы.Это было легко, следуя инструкциям на jqueryui.com.

В контексте эти вкладки будут отображать результаты поиска из формы.Я хотел бы пойти дальше и удалить cookie при отправке формы, чтобы вкладка по умолчанию снова была доступна при отправке нового поискового запроса.Эта часть не так хорошо.Не помогает то, что примеры, приведенные на jqueryui.com и stilbuero.de, совершенно разные, и они не совпадают друг с другом.Раньше я никогда не имел дело с файлами cookie, и я не достаточно разбираюсь в jQuery, чтобы разработать его с нуля, поэтому любая помощь будет полезна.

Вот мои вкладки: 

<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: 

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

Ссылка для проверки того, что cookie установлен: 

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

И, наконец, jQuery, который я получил до сих пор: 

// 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;
});

Помоги мне Оби-Ван Кеноби.Ты моя единственная надежда.

1 Ответ

4 голосов
/ 17 сентября 2010

Хорошо, неважно.Я понял.Вот новый рабочий код: 

<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>

Проблема заключалась в том, что я не мог понять, как определить cookie, с которыми я пытался работать.Но просто из-за глупой удачи я попытался включить опцию «name».Как-то расстраивает тот факт, что jqueryui.com ничего об этом не упоминает.Надеюсь, это может помочь кому-то еще с той же проблемой.

Так что, я думаю, я Оби-Ван.Иди ко мне.

...