Remember which tab was active after refresh

Question

I\'m using jquery tabs on a web page and when the page is refreshed it loses what ever tab I had been on and goes back to the first tab.

Has anyone come across this

Answer 1

You can use the jQuery History plugin, here is a demo (load another link in the demo and try refreshing)

Answer 2

I've recently had the same problem and spent a longtime looking at the docs for JQuery UI Tabs Widget. I ended up using the events activate and create for JQuery UI 1.10 as well as localStorage to store the current tab before page refresh.

    $( ".selector" ).tabs({                                                 
        activate: function( event, ui) {
            //when tab is activated store it's index in activeTabIndex
                var activeTabIndex = $('.tabs').tabs('option','active');
            //add activeTabIndex to localStorage and set with key of 'currentTab'  
                localStorage.setItem('currentTab', activeTabIndex); 
                            },
            create: function( event, ui ) {
                $(".tabs").tabs({       
            //when tabs are created on page refresh, the active tab is set to index of 'currentTab' 
            //after getItem from localStorage
            active: localStorage.getItem('currentTab')
        });
      }
   });

Answer 3

If you're using bootstrap 3 or 4 tabs, you could use local storage to store the current tab id then set it to show on page load. First you'll prevent the default method to open the tab, then save the opened tab link id on tab open event.

 $('a[data-toggle="tab"]').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    $('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href");
        localStorage.setItem('selectedTab', id)
    });

    var selectedTab = localStorage.getItem('selectedTab');

    if (selectedTab != null) {
        $('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
    }

Always works fine for me.

Answer 4

My company blocks cookies so I found a workaround. Simply keep track of the tab using a hidden field and pass that value back once the request is finished. It's not pretty but it gets the job done.

<% if(request.getAttribute("tab")==null) { %>
    $("#tabs").tabs();
<% } else { %>
    $("#tabs").tabs({selected:<%=request.getAttribute("tab").toString() %>});
<% } %>

On the back end I just set the attribute

request.setAttribute("tab", f.get("tab").toString());

Hope this helps.

Answer 5

   $(function () {

        $("#dialog").dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        //$(function () {
            $("#tabs").tabs({
                    select: function (event, ui) {                       
                    document.location.href = ui.tab.href;                        
                }
            }).show();

        //});

                    $("#MainContent_button1").click(function (event) {                           
                        event .preventDefault();
                         $("#dialog").dialog("open");                           
                    });
    });

I used it in ASP.NET and it works fine for me. I am also having a button in second tab to show some dialog box and it works perfect.

Pooja Dhingra

Answer 6

Another option is to use html 5 storage. See here for an example: http://www.w3schools.com/html/html5_webstorage.asp