Maintaining jQuery-ui previous active tab (before reload) on page reload

Question

I have a jquery-ui tab component with two tabs.

<div id="tabs">
  @Html.Hidden("SelectedTabId")
  <ul>
    <li><a href="#Tab-1">Tab1</a></li>
    <li><a href="#Tab-2">Tab2</a></li>
  </ul>
  <div id="Tab-1">
  </div>
  <div id="Tab-2">
  </div>
</div>

When I am in Tab-2, I do some stuff that cause some fields (@Html.TextBoxFor) in tab-2 to be updated programmatically and automatically when some condition occurs. So after it happens (fields updated) the page is reloaded. After page is reloaded, first tab Tab-1 is being active, but I want Tab-2 to be active instead which it was the active before page was reloaded.

I am using a hidden field, SelectedTabId (see code above), which keeps the current active tab so I am updating it with the tab index on tab active and I am activating the correct tab after page is reloading by request this value. See below code:

<script type="text/javascript">
        $(function () { 
            $("#tabs").tabs({ active: $('#SelectedTabId').val()});
        }

        $(document).ready(function () {
            var tabs = $("#tabs").tabs({
                beforeActivate: function (event, ui) {
                    $('#SelectedTabId').val(ui.newTab.index());
                }
            });
        }
</script>

I want previous active tab to keep active after page is reloaded but it is not working so what am i doing wrong?

I am using jQuery-ui 1.10.2

Answer 1

Use browser sessionStorage to store the tab index,

something like this:

$(document).ready(function () {
    var currentTabIndex = "0";

    $tab = $("#tabs").tabs({
         activate : function (e, ui) {
            currentTabIndex = ui.newTab.index().toString();
            sessionStorage.setItem('tab-index', currentTabIndex);
         }
    });

    if (sessionStorage.getItem('tab-index') != null) {
        currentTabIndex = sessionStorage.getItem('tab-index');
        console.log(currentTabIndex);
        $tab.tabs('option', 'active', currentTabIndex);
    }
    $('#btn-sub').on('click', function () {
        sessionStorage.setItem("tab-index", currentTabIndex);
        //window.location = "/Home/Index/";
    });
});

this will update the sessionStorage on changing the tab, try updating the tab by using your condition. I hope it helps.

here is the Demo for local storage

You can remove the sessionStorage by using sessionStorage.removeItem('tab-index');

sessionStorage is cleared automatically when the browser is closed. It works in pretty much the same way as localStorage.

here is the Demo for sessionStorage

Answer 2

I found the way to store the id of the currently active tab in to the hidden variable. Take a look at this demo JSFIDDLE. As you get the id of the currently active tab form the hidden input element store it in the session or DB and when the page reloads fetch that value and set that in active: option of tabs.

HTML:

Currently active tab: <input type="text" id="active_tab">
<div id="tabs">
<ul>
<li><a href="#tabs-1" id="1">Tab 1</a></li>
<li><a href="#tabs-2" id="2">Tab 2</a></li>
<li><a href="#tabs-3" id="3">Tab 3</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>

JS :

$(function() {
     $( "#tabs" ).tabs({
         active: 2,
         activate: function( event, ui ) {
             var active = $( ".selector" ).tabs( "option", "active" );
             console.log(active);
             $('#active_tab').val(active.context.activeElement.id);
         }
     });

});