Stay on same tab upon refresh (Tabs within Tabs)

Question

Upon page submit the main tab(Register, lock, unlock etc) stays on the current one but the sub tab(list, locked, checked out etc) goes to default(Search) upon page submit. example if I do a submit on List or Locked tab it defaults to Search tab. Problem: I have to keep track of both the horizontal tab and the vertical tab and currently I am able to track only the horizontal tab

HTML Main tab(Horizontal):

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Register</a><div class="hidden_area">Register a device</div></li>
    <li><a href="#tabs-2">Lock</a><div class="hidden_area">Lock a device</div></li>
    <li><a href="#tabs-3">Unlock</a><div class="hidden_area">Unlock a device</div></li>
    <li><a href="#tabs-4">Transfer</a><div class="hidden_area">Transfer device to a new warehouse</div></li>
    <li><a href="#tabs-5">Manage Users</a><div class="hidden_area">Change/Add regions to a user</div></li>
    <li><a href="#tabs-6">Reporting</a><div class="hidden_area">Reporting Services</div></li>
</ul>

HTML Sub tab(Vertical):

<div id="tabs1">
    <ul>
        <li class="first current"><a href="#tab1">Search</a><div class="hidden_area1">Search a device</div></li>
        <li><a href="#tab2">List</a><div class="hidden_area1">List all devices</div></li>
        <li><a href="#tab3">Locked</a><div class="hidden_area1">List locked devices</div></li>
        <li><a href="#tab4">Checked Out</a><div class="hidden_area1">List checked out devices</div></li>
        <li><a href="#tab5">Repair</a><div class="hidden_area1">List repair devices</div></li>
        <li class="last"><a href="#tab6">No Check In</a><div class="hidden_area1">Devices checked out but not checked in</div></li>
    </ul>

jQuery Main Tab:

var index = 'ui.newTab.index()';
//  Define data store name
var dataStore = window.sessionStorage;
var oldIndex = 0;
try {
    // getter: Fetch previous value
    oldIndex = dataStore.getItem(index);
} catch(e) {}
$( "#tabs" ).tabs({
    active: oldIndex,
    activate: function(event, ui) {
    //  Get future value
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        //  Set future value
        try {
            dataStore.setItem( index, newIndex );
        } catch(e) {}
    }
});

jQuery Sub Tab:

$( "#tabs1" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
$( "#tabs1 li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

Answer 1

I assume that you are using jQuery UI tabs ,

here is an example of using tabs + cookies to save the last clicked tab

http://jqueryui.com/demos/tabs/#cookie

demo : open this link http://jqueryui.com/demos/tabs/cookie.html

the close it and re open it and you will see the same clicked tab

update: after 3 years of this answer jquery ui has deprecated the cookie option : http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option.

but you can still append take a look here if this fits your needs or not https://stackoverflow.com/a/14313315/109217

OR

You could try this

$(function() {
    //  jQueryUI 1.10 and HTML5 ready
    //      http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option 
    //  Documentation
    //      http://api.jqueryui.com/tabs/#option-active
    //      http://api.jqueryui.com/tabs/#event-activate
    //      http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/
    //
    //  Define friendly index name
    var index = 'key';
    //  Define friendly data store name
    var dataStore = window.sessionStorage;
    //  Start magic!
    try {
        // getter: Fetch previous value
        var oldIndex = dataStore.getItem(index);
    } catch(e) {
        // getter: Always default to first tab in error state
        var oldIndex = 0;
    }
    $('#tabs').tabs({
        // The zero-based index of the panel that is active (open)
        active : oldIndex,
        // Triggered after a tab has been activated
        activate : function( event, ui ){
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            //  Set future value
            dataStore.setItem( index, newIndex ) 
        }
    }); 
    }); 

Answer 2

Solved: Horizontal tabs worked fine, but for vertical tabs the control was going to the default tab hence had to use ui.oldtab.index()

jQuery:

var index1 = 'ui.oldTab.index()';
//  Define data store name
var dataStore = window.sessionStorage;
var oldIndex = 0;
try {
     // getter: Fetch previous value
     oldIndex1 = dataStore.getItem(index1);
     } catch(e) {}
$( "#tabs1" ).tabs({
active: oldIndex1,
activate: function(event, ui) {
//  Get future value
var newIndex1 = ui.newTab.parent().children().index(ui.newTab);
//  Set future value
try {
     dataStore.setItem( index1, newIndex1);
     } catch(e) {}
     }
});