jquery tab cookie ...? - php

Question

Hy ,
I have the following code for mai tabs ...
$(document).ready(function() {
$("#continut_right div.tab").hide();
$("#continut_right div.tab:first-child").show();
$("#navigatie_left ul li").click(function() {
var id_tab = $(this).attr("id");
$("#continut_right div.tab").hide();
$("#continut_right").children("#" + id_tab).show();
});
and the markup is something like this :
<div id="continut_right">
<!-- tab 1 -->
<div class="tab" id="id1">
content ... bla bla bla
</div>
</div>
and the menu that trigger tabs to change :
<div id="navigatie_left">
<a style="text-decoration: none; color:#000; font-family:Arial; font-size:15px; font-weight:bold;" href="<?php echo $_SERVER['PHP_SELF']; ?>">[ REFRESH ]</a>
<br /><br />
<ul>
<li id="id1">Categorii principale</li>
<li id="id2">Categorii secundare</li>
<li id="id2">Texte categorii secundare</li>
</ul>
</div>
How can i implement a code ... to remember what tab was opened because when i do a form submit to php_self to keep that tab open to see changes ... ??
Thanks a lot

Answer 1

You can use window.location.hash to store the current tab id. You have to write code that reads the window.location.hash property for the tab id on $(document).ready() and automatically switch to that tab.
An example:
$(document).ready(function(){
var id_tab = window.location.hash;
$("#continut_right div.tab").hide();
if(id_tab){
$("#continut_right").children(id_tab).show();
}else{
$("#continut_right div.tab:first-child").show();
}
$("#navigatie_left ul li").click(function() {
var id_tab = $(this).attr("id");
$("#continut_right div.tab").hide();
$("#continut_right").children("#" + id_tab).show();
window.location.hash = id_tab;
});
});

Answer 2

You could look into .appendTo()'s JSON Cookie solution. it would offer an easy method of storing and retrieving the last-active tab.
The usage is documented as follows:
$.cookie( string key, mixed value [, hash options ] )
So you could store the index of the active tab:
$.cookie( 'activeTab', '3' );
And then retrieve it on page load with:
$.cookie( 'activeTab' ); //returns the set value
So let's look at how you could implement it:
$("#navigatie_left ul li").click(function() {
var id_tab = $(this).attr("id");
$.cookie( 'activeTab', id_tab ); // storing the new active tab
$("#continut_right div.tab").hide();
$("#continut_right").children("#" + id_tab).show();
});
Now for us to automatically show the tab on page load:
$(document).ready(function() {
$("#continut_right div.tab").hide();
$("#continut_right div.tab:first-child").show();
// Which tab should we show on document.ready?
$("#continut_right").children("#" + $.cookie('activeTab')).show();
});