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

dumb question, impossible if you are not using any server side language. jquery cant hold variable till next page load.. try jquery cookie to set active tab. not sure.. just try — Manjunath Hegde, Oct 23 '13 at 10:53
When you say , programatically reloading the page after something is updated, how are you doing that ? — dreamweiver, Oct 23 '13 at 10:56
I think the real problem here is that you've got two separate `document.ready` event handlers, trying to solve the same problem in two different ways on the same page. — xdumaine, Oct 23 '13 at 12:56
@dreamweiver I only update the value of the textboxfor through its corresponding associated view model, then page is reloaded automatically. I am not doing anything else. I am not forcing the page to be reloaded, it is reloaded automatically on textboxfor value update. — user304602, Oct 23 '13 at 15:32
@xdumaine could you explain a little more? i am not understanding you at all. — user304602, Oct 23 '13 at 15:33

super · Accepted Answer · 2013-12-19T06:17:38.303

5

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

edited Dec 19 '13 at 06:17

answered Oct 23 '13 at 12:17

super

2,288
2
21
23

This works like a charm! a few doubts: why do you set window.location?and,once user exits web app, is it necessary to remove the item in the localStorage or is is automatically removed? I have checked that your solution works from IE 7 to IE 10,and last versions of firefox and chrome. I guess localStorage is being supported for all browsers, am I right?Sorry,I am very new on web app programming.Could it be removed from localStorage on browser close by doing below? Below is not working when page is reloaded: $(window).unload(function () { localStorage.removeItem('tab-index'); }); – user304602 Oct 23 '13 at 16:04
1

window.location is used just like a post/reload, it is an example,For more details about local storage read this article.[Local Storage](http://diveintohtml5.info/storage.html) – super Oct 23 '13 at 16:07
ok, thanks. Regarding to remove automatically the localStorage on browser closed, as I seen by googling it can be done by using sessionStorage instead. Replacing localStorage by sessionStorage is working as well. See below: http://stackoverflow.com/questions/9943220/how-to-delete-a-localstorage-item-when-the-browser-window-tab-is-closed – user304602 Oct 23 '13 at 16:31
Why is that last section, the one with the on click, there? The index is already saved at the point, so saving it again is redundant. Other than that, very helpful answer. Thank you. – Sean Dec 17 '13 at 13:51
@bios i tried working with it with my example but not working, please try and have a look . i posted it on the stackoverflow . the link is : http://stackoverflow.com/questions/22964301/asp-net-bootstrap-keep-current-active-tab-after-post-back-event?noredirect=1#comment35330632_22964301 – Djama Apr 22 '14 at 17:20

Rahul Gupta · Answer 2 · 2013-10-23T13:24:53.743

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

});

i tried working with it but no result. try and check my won . the link is : http://stackoverflow.com/questions/22964301/asp-net-bootstrap-keep-current-active-tab-after-post-back-event?noredirect=1#comment35330632_22964301 — Djama, Apr 22 '14 at 17:21

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

2 Answers2

Linked