Problème avec les onglets de l'interface utilisateur jQuery et l'option de cookie

Question

J'utilise le jQuery UI tabs interface et je veux définir un cookie (en utilisant le script jquery.cookie.js qu'ils recommandent, à partir de stilbuero.de/jquery/cookie/) pour se rappeler quel onglet était sélectionné en dernier lorsque la page est actualisée. C'était facile, en suivant les instructions sur jqueryui.com.

Dans le contexte, ces onglets vont afficher les résultats de recherche d'un formulaire. Je voudrais aller plus loin et supprimer le cookie lorsque le formulaire est soumis, afin que l'onglet par défaut soit à nouveau disponible lorsqu'un nouveau terme de recherche est soumis. Cette partie ne va pas si bien. Cela n'aide pas que les exemples donnés sur jqueryui.com et stilbuero.de sont complètement différents et ils ne jive pas vraiment entre eux. Je n'ai jamais traité de cookies avant et je ne comprends pas assez jQuery pour le développer à partir de zéro, donc toute aide serait super.

Voici mon onglets:

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

est ici la forme:

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

Un lien pour vérifier que le cookie est:

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

Et enfin le jQuery que je Je suis arrivé si loin:

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

Aidez-moi Obi-Wan Kenobi. Tu es mon seul espoir.

Answer 1

Bon, rien à faire. Je l'ai compris. Voici le nouveau code de travail:

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

La question était que je ne pouvais pas comprendre comment identifier le cookie que je voulais travailler avec. Mais juste par pur hasard bête, j'ai essayé de brancher une option "nom". Un peu frustrant que jqueryui.com ne mentionne rien à ce sujet. Espérons que cela aidera quelqu'un d'autre avec le même problème.

Donc je suppose qu'il se trouve que je suis Obi-Wan. Va moi.