JQuery postback, supports the same tab after postback

Question

I am using jquery tab and the following js method, how and what can I change to maintain tab state between postbacks? (Resets tabs to first tab after page_load)

$(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); 

Answer 1

You can track the active tab in a hidden field using Javascript, and then check the hidden field when the page loads. (Also in Javascript)

Alternatively, you can use UpdatePanels with ASP.Net AJAX to eliminate postback. (Note: if the tabs are in the update panel, they will not work correctly)

Answer 2

An alternative to using a hidden field is to use a cookie property in a tab control

$ ("# reeds"). badges ({cookie: {expiration date: 1}});

To do this, you need to refer to the jquery.cookie.js file to work

jQuery tabs cookie

Answer 3

Try the following:

 <p class="hiddenData"><asp:HiddenField ID="hdnData" runat="server" /></p> <script type="text/javascript"> $(document).ready(function() { $('.tabs li a').click(function() { }); $('.tabs li').hover(function() { var liData = $(this); $('.hiddenData input:hidden').val(liData.find('span').text()); }); if ($('.hiddenData input:hidden').val() != '') { var liList = $('.tabs li'); var hiddenData = $('.hiddenData input:hidden').val(); liList.each(function() { if ($(this).find('span').text() == hiddenData) { $(this).find('a').click(); } }); } }); </script> 

Answer 4

you said

  //When page loads... $(".tab_content").hide(); //Hide all content 

I would download this with css since then faster. hide probably does the mapping: none;

one solution is writing javascript from codebehind.
and c # example

 var selectedTab = IsAdvancedSearch ? "{'selected':1}" : String.Empty; ScriptManager.RegisterClientScriptBlock(this, GetType(), "search", String.Format(@"jQuery(document).ready(function() {{ jQuery('#search').tabs({0}); }});", selectedTab), true); 

or you can add the attribute to the #search tag with C # and read it using js

FROM#

 search.Attributes.Add("selectedtab", "1"); 

Js

 jQuery("#search").attr("selectedtab"); 

and another solution is with the request.
you can read the value from the query string.

I personally would choose the first or second.

Answer 5

The hidden field approach works well for me. With .aspx containing

 <asp:HiddenField runat="server" ID="hfLastTab" Value="0" /> 

and js ready function containing

 $("#tabs").tabs({ active: <%= hfLastTab.Value %> }); 

the active tab will be set in a hidden field. (What is the jQuery UI v1.9 property, "active" fka 'selected'.) The various controls that can be passed after setting hfLastTab.Value correspond to the corresponding index.

I also wanted to point to a specific tab with a URL from another page and spent a lot of time adding and trying to parse the end hash code before moving on to the querystring parameter? t = N. I am parsing this in the Page.IsPostback branch of the pageLoad (). For new page loads, we go to tab 0 if nothing is specified, or tab N if the query parameter has a parameter. Many ways to handle this parsing. Here is one:

  if (!Page.IsPostBack) { string pat = @"t=(\d)"; Regex r = new Regex(pat, RegexOptions.IgnoreCase); Match m = r.Match(Request.Url.Query); if (m.Success) hfLastTab.Value = m.Groups[0].ToString(); }