Remember which tab was active after the update

Question

I use jquery tabs on a web page, and when the page refreshes, it loses the tab that I was included in and returns to the first tab.

Has anyone encountered this problem and knew how to solve it?

Answer 1

I assume you are using jQuery UI tabs,

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

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

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

close it and open it and you will see the same tab with a click

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

but you can still add here if it suits your needs or not https://stackoverflow.com/a/464829/

Answer 2

Like others, I struggled with my ui-tabs cookie history in jQueryUI 1.10. Thanks to Harry's solution and some other online documentation that I refer to in the code below, I now have a working non-cookie solution! I was able to test in Firefox 18.0.1 and IE 9.0.12. According to my resources, Chrome, Firefox, Safari, and IE8 and above support session storage.

$(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 3

A simple alternative that I just implemented:

 $(".tabs").tabs({ select: function(event, ui) { window.location.replace(ui.tab.hash); }, }); 

This will add a hash value to the URL so that the page refresh reloads this tab, and using location.replace rather than location.hash , we do not fill the user's history with unwanted steps back.

Hope this helps.

Answer 4

Now that the cookie is gone in jQuery UI 1.10.0, I mixed the Gayathiri approach with new parameters and events:

 // using cookie plugin from https://github.com/carhartl/jquery-cookie var tabCookieName = "ui-tabs-1"; $(".tabs").tabs({ active : ($.cookie(tabCookieName) || 0); activate : function( event, ui ) { var newIndex = ui.newTab.parent().children().index(ui.newTab); // my setup requires the custom path, yours may not $.cookie(tabCookieName, newIndex, { path: window.location.pathname }); } }); 

Answer 5

A short, mock-independent way to do this with localStorage :

 $("#tabs").tabs({ active: localStorage.getItem("currentIdx"), activate: function(event, ui) { localStorage.setItem("currentIdx", $(this).tabs('option', 'active')); } }); 

---

A layout-specific way to do this using custom data attributes (perhaps useful if attribute values ​​were to be used somehow in another place in your script).

jQuery UI:

 $("#tabs").tabs({ active: localStorage.getItem("currentTabIndex"), activate: function(event, ui) { localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]); } }); 

HTML layout example:

 <div id="tabs"> <div id="tabs-1" data-tab-index="0"> tab 1 stuff... </div> <div id="tabs-2" data-tab-index="1"> tab 2 stuff... </div> <div id="tabs-3" data-tab-index="2"> tab 3 stuff... </div> </div> 

Answer 6

When updating web pages, they reload their state from the server, requesting the page again.

Either the web server needs to remember the state and provide the file differently than the default, or you can use cookies or a hash component of the URL and some jQuery to store the state, read it when loading and restoring it.

See the jquery.cookie or SWFaddress plugin , learn how to manipulate hash values ​​yourself or the jQuery history plugin.

The hash method is particularly attractive because it replicates changes to the URL, so copying / pasting the URL still works, like bookmarks.

Answer 7

Enable jquery cookie plugin:

 <script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script> 

declare the cookie name inside $ .function ({.. or document.ready as

 var cookieName = "mycookie"; $("#tabs").tabs({ selected : ($.cookies.get(cookieName) || 0), select : function(e, ui) { $.cookies.set(cookieName, ui.index); } }); 

Answer 8

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

Answer 9

Here is an alternative way to allow storing of an open tab with an element identifier (not an index). This is useful if you use this code to synchronize open tabs on two different pages with similar elements (for example, on the view and edit page).

 var tabsid = "#tabs"; var cookieid = "tabs_selected2"; var activetabnr = 0; if (($.cookie(cookieid)!=null) && ($.cookie(cookieid)!="")) { activetabnr = $(tabsid+' a[href="'+$.cookie(cookieid)+'"]').parent().index(); } $(tabsid).tabs({ active: $(tabsid).tabs({ active: activetabnr }), beforeActivate: function (event, ui) { $.cookie(cookieid, "#"+ui.newPanel.attr('id')); } }); 

Works with jQuery UI 1.10. Remember to enable the jquery.cookie plugin !

 <script type="text/javascript" src="/js/jquery.cookie.js"></script> 

Answer 10

You can use jQuery History plugin , here demo (load one more link in demo and try updating)

Answer 11

My company blocks cookies, so I found a workaround. Just track the tab with a hidden field and pass this value after the request is complete. This is not very good, but he is doing his job.

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

At the back end, I just set the attribute

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

Hope this helps.

Answer 12

Do you think you can add the same function to the code below.

 $(".menu > li").click(function(e){ $(".content." + $(".menu > .active").attr("id")).fadeOut("fast", function() { $(".content." + e.target.id).fadeIn(); $(".menu > #" + e.target.id).addClass("active"); }); $(".menu > .active").removeClass("active"); return true; }); 

Answer 13

You can try something like this, it's pretty easy to do.

 # Set selected_tab to the correct index based on the current url anchor hash selected_tab = 0 if matches = /#(\w+)/.exec(window.location.hash) # find the index of the tab with the given id selected_tab = $('#' + matches[1]).index() - 1 # Initialize the tabs and set 'selected' to equal the selected_tab variable we just set $('.tabable').tabs selected: selected_tab, # this is where the magic happens select: (evt, ui) -> window.location.hash = ui.panel.id # set an anchor tag in the url with the tab id 

Answer 14

  $(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 great for me. I also have a button in the second tab to show some kind of dialog box, and it works fine.

Puja dhinga

Answer 15

I solved the same problem with help.

HTML tab

  <ul class="tabs clear-fix"> <li class=""><a href="#tab=java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; "></i>JAVA</a><span></span></li> <li class=""><a href="#tab=js" id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;"></i>JAVA SCRIPT</a><span></span></li> <li><a href="#tab=c" id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;"></i>C</a><span></span></li> <li><a href="#tab=c2" id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;"></i>C++</a><span></span></li> <li><a href="#tab=jQ" id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;"></i>jQuery</a><span></span></li> </ul> 

Javascript

  var selectedTab = window.location.href.split("#tab=")[1] ; var selectedId = $('a[href$=' + selectedTab+']:first').attr('id'); if (typeof selectedId === "undefined") { $('#tab1-tab').trigger("click"); } else{ $('#'+selectedId).trigger("click"); } 

It worked for me, the proposal was appreciated.

Answer 16

I had the same issue recently and have been looking at documents for the JQuery UI Tabs Widget for a long time. I ended up using the activate and create events for JQuery UI 1.10, as well as localStorage to store the current tab before refreshing the page.

 $( ".selector" ).tabs({ activate: function( event, ui) { //when tab is activated store it 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') }); } 

});