Laissez le volet accordéon jQuery actuel ouvert après la publication ASP.NET?

Vous pouvez utiliser un champ de saisie masqué pour conserver l’index accordéon actif pendant les publications, puis le remplir à l’aide de javascript lors de l’événement de modification de l’accordéon.

Vous pourriez probablement trouver un moyen plus efficace de capturer l’index actif pendant l’événement de modification, mais cela semble fonctionner.

Une fois la page chargée, elle extrait l’index actif du champ masqué et le stocke dans une variable. Il initialise ensuite l’accordéon à l’aide de l’index récupéré et d’une fonction personnalisée à déclencher sur l’événement de modification, lequel écrit un nouvel index dans le champ masqué chaque fois qu’un nouveau volet est activé.

Au cours d’une publication, la valeur du champ masqué est conservée dans ViewState. Ainsi, lorsque la page est chargée à nouveau, l’accordéon est initialisé avec l’index du dernier volet sur lequel l’utilisateur a cliqué.

La solution de MaxCarey semble bien fonctionner, mais la dernière version de jQuery UI (1.10.4) semble présenter quelques différences. L’événement correct n’est pas “modifié” maintenant, mais “activer” (ou “beforeActivate”, si vous souhaitez que l’option puisse annuler l’événement).

  ... $(document).ready(function () { var activeIndex = parseInt($("#<%=hidAccordionIndex.ClientID %>").val()); $("#accordion").accordion({ heightStyle: "content", active: activeIndex, activate: function (event, ui) { var index = $(this).children('h3').index(ui.newHeader); $("#<%=hidAccordionIndex.ClientID %>").val(index); } }); }); 

Pour moi, je peux vérifier que la valeur hidAccordionIndex est définie sur la valeur appropriée, mais lors de la publication, elle est définie sur 0, quoi que j’essaie. J’ai essayé de le définir sur une chaîne vide, comme l’a suggéré Dave.Lebr1, mais il ne persiste toujours pas sur la publication.

Cela devrait restr disponible sur la publication, car mon champ divAccordionIndex doit avoir ViewState (j’ai vérifié qu’il est activé).

Quelqu’un at-il eu du succès avec cela? Ce menu est dans ma page principale, et cela fonctionne très bien … autre que cela.

écrivez l’index ou l’id du volet accordéon dans lequel le bouton a été pressé à l’aide de ClientScript.RegisterStartupScript . Supposons que l’utilisateur clique sur le bouton nommé btnSubmit qui se trouve dans le volet 3. Cela fonctionnera comme btnSubmit :

 protected void btnSubmitClick(object sender, EventArgs e) { //process button click //class this function at end: SetAccordionPane(3); } //you can call this function every time you need to set specific pane to open //positon private void SetAccordionPane(int idx) { var s=" 

maintenant en javascript:

 $(function(){ if(paneIndex) { $('.selector').accordion({active: paneIndex}); } else { $('.selector').accordion(); } }); 

Je sais que c’est tard, mais cela peut encore aider quelqu’un qui se débat avec ça. La solution ici est essentiellement une combinaison de certaines des idées ci-dessus. 😉

J’utilise jquery-ui-1.10.4.custom.min.js et jquery-1.6.3.min.js.

  <%--the hidden field saves the active tab during a postback--%>    

et voici le javaScript:

Pour développer les idées précédentes de HiddenField, mais sans avoir à modifier votre JS:

Dans votre page:

Dans votre JS:

 $('#yourAccordion').accordion({ heightStyle: "content" , active: parseInt($('#hidAccordionIndex').val()) , activate: function (e, ui) { $('#hidAccordionIndex').val($(this).children('h3').index(ui.newHeader)); } }); 

La clé est ClientIDMode = “Static”. Cette approche nécessite peu de modifications pour fonctionner avec presque tous les langages côté serveur, car le JS n’a pas à changer, il n’ya qu’un seul champ caché.

Cela fonctionne de mon côté S’il vous plaît vérifier ……

 $(document).ready(function () { var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val()); alert(activeIndex); $("#accordion").accordion({ active: activeIndex, beforeActivate: function (event, ui) { var index = $(this).children('h3').index(ui.newHeader); $('#<%=hidAccordionIndex.ClientID %>').val(index); } }); }); 

Placez votre bouton ou grid sur lequel vous devrez peut-être cliquer ou mis à jour dans un panneau de mise à jour. Alors l’accordéon ui fonctionnera très bien 100% + garantie .. Sarath @ f1

Utilisez l’option “active” lorsque vous créez l’accordéon. Quelque chose comme ça:

 $('.selector').accordion({ active: 2 }); 

Cela activera la deuxième option dans l’accordéon. Vous pouvez également passer un sélecteur à sélectionner par ID.

 $("#accordion").accordion({ heightStyle: "content", collapsible: true, navigation: true }); 

Définir la propriété de navigation sur true conservera l’état du panneau accordéon.

Ajouter au message de MaxCarey …
Un moyen plus fiable d’obtenir le nouvel index accordéon est

 change: function (event, ui) { var index = $(this).accordion("option", "active"); $("#<% =hidAccordionIndex.ClientID %>').val(index); } 

J’ai eu le même problème, je suis venu ici. 1. La réponse de MaxCarey était assez bonne pour résoudre le problème, mais malheureusement, je n’avais pas de pièce d’identité pour mes accordéons. (J’utilisais un modèle tiers, ils utilisaient simplement css class). 2. Imran H. Ashraf était également bon mais le même problème: pas d’access à l’accordéon par ID.

Mon problème: 1. J’avais un DetailsView dans un accordéon avec la commande Edit Update Cancel. 2. Lorsque je clique sur le bouton Modifier, cela fonctionne mais mon accordéon est fermé.

Ma solution: 1. J’ai mis un ScriptManager sur mon formulaire. 2. Je mets un UpdatePanel dans mon accordéon. 3. Je mets mon DetailsView dans UpdatePanel. 4. C’est ça, pas de codage, pas de code derrière et ça marche très bien.

Voici le balisage HTML:

 
 Personal Information 
 
                
  

J’espère que ça pourrait aider quelqu’un.

Merci codage heureux

J’utilise cette solution pour que mon projet fonctionne, mais quelque chose ne fonctionnait pas.

Première chose, l’accordéon ne gardera pas l’index en mémoire, donc l’accordéon se réinitialisait à chaque fois.

Deuxièmement, je n’ai pas pu trouver le champ masqué avec le '#<%=hidAccordionIndex.ClientID %>'

Alors, ce que je fais c’est

1- Définissez la valeur par défaut du champ masqué sur null

2- Obtenir l’index actif avec cette

Assurez-vous d’parsingr, sinon cela ne fonctionnera pas

  var activeIndex = parseInt($('input[id$=hidAccordionIndex]').val()); 

Voici mon code javascript:

  $("#accordion").accordion ({ autoHeight:false, event: "mousedown", active: activeIndex, collapsible: true, change: function (event, ui) { var index = $(this).accordion("option", "active"); $('input[id$=hidAccordionIndex]').val(index); } }); 

  var activeIndex = parseInt($('#<%=hidAccordionIndex.ClientID %>').val()); $("#accordion,#inneraccordian").accordion({ heightStyle: "content", collapsible: true, navigation: true, active: activeIndex, beforeActivate: function (event, ui) { var index = $(this).children('h3').index(ui.newHeader); $('#<%=hidAccordionIndex.ClientID %>').val(index); } });