JQuery postback, maintenir le même onglet après la publication

Question

J'utilise l'onglet jquery et la méthode js suivante, comment puis-je le modifier pour maintenir l'état de la tabulation entre les publications? (Ceci remet à zéro les onglets de premier onglet après 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

Vous pouvez suivre l'onglet actif dans un champ masqué en utilisant Javascript, puis vérifier le champ caché lorsque la page est chargée. (Également en Javascript)

Alternativement, vous pouvez utiliser UpdatePanels avec ASP.Net AJAX pour éliminer les publications. (Notez que si les onglets sont dans un panneau de mise à jour, ils ne fonctionneront pas correctement)

Answer 2

Une alternative à l'aide d'un champ caché est d'utiliser la propriété cookie sur le contrôle onglet

$ ("# onglets "). onglets ({ cookie: { expire: 1 } });

Vous devez référencer le fichier jquery.cookie.js pour que cela fonctionne

jQuery tabs cookie

Answer 3

Effectuez les opérations suivantes:

<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

Vous avez dit

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

Je voudrais charger le ceci avec css puisque c'est plus rapide. hide fait probablement un affichage: none;

Une solution est l'écriture de javascript à partir de codebehind.
et exemple avec C#

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

ou vous pouvez ajouter un attribut à la balise #search avec C# et le lire avec js

C#

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

JS

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

et une autre solution est avec querystring.
vous pouvez lire la valeur de la chaîne de requête.

Je choisirais personnellement le premier ou le second.

Answer 5

L'approche du champ caché fonctionne bien pour moi. Avec le .aspx contenant

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

et la fonction js prêt contenant

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

l'onglet actif sera fixé par le champ caché. (C'est la propriété jQuery UI v1.9, "active" f.k.a.'selected'.) Les différents contrôles que postback peut fournir pour définir hfLastTab.Value à l'index approprié. Je voulais aussi pouvoir pointer vers un onglet particulier avec une URL d'une autre page, et passer beaucoup de temps à ajouter et essayer d'analyser une référence de hachage avant de passer à un paramètre de chaîne de requête,? t = N. J'analyse cela dans une branche! Page.IsPostback de Page_Load(). Pour les nouvelles charges de pages, nous allons à l'onglet 0 si rien n'est spécifié, ou à l'onglet N si la chaîne de requête a le paramètre. Beaucoup de façons de gérer cette analyse. En voici un:

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