Jquery toggle devrait se développer après le rechargement de page

Question

J'ai écrit ci-dessous le code pour réduire/développer une section. Cela fonctionne bien. Enfin, si je clique sur le bouton "Enregistrer" et que je re-charge la page dans asp.net. Alors, les sections vont à nouveau Colleapse par défaut. J'ai besoin d'eux pour m'étendre. Comment puis je faire ça?

$(function() { 
     $('tr.subCategory') 
      .css("cursor", "pointer") 
      .attr("title", "Click to expand/collapse") 
      .click(function() { 
     $(this).siblings('.RegText-' + this.id).toggle(); 
      }); 
      $('tr[@class^=RegText-]').hide().children('td'); 
    }) 

Answer 1

Si vous utilisez des panneaux de mise à jour, vous pouvez nous faire du fait que (document) $ jQuery de .ready est appelée uniquement sur la charge initiale et ASP.NET AJAX pageLoad() est appelé pour chaque publication. Vous pouvez réduire votre section dans $ (document) .ready afin qu'elle soit initialement cachée et ensuite assigner le gestionnaire de clic dans pageLoad() afin que les utilisateurs puissent encore le replier s'ils en ont besoin après la sauvegarde.

$(document).ready(function() {{ 
    $('tr[@class^=RegText-]').hide().children('td'); 
}}); 

function pageLoad() { 
    $('tr.subCategory').click(function() {         
     $(this).siblings('.RegText-' + this.id).toggle(); 
    });   
} 

Answer 2

Vous pouvez enregistrer l'état en utilisant:

• URL hachage: mysite.com # a = 1, b = 2 ... ou comme vous voulez enregistrer votre état.
• Cookies
• window.name

Sur reload, vérifiez l'état enregistré, l'analyse syntaxique et réexécuter dans votre code.

Edit:

Lorsque vous exécutez quelque chose qui change dans l'interface utilisateur vous devez enregistrer cette action quelque part (à savoir le panneau A est ouvert), dans une sorte de code. Il peut s'agir de noms, de paires de valeurs (ID, STATE | ID, STATE..etc) dans une chaîne ou tout ce que vous choisissez. Vous devez ensuite programmer un mécanisme qui récupère ces informations "état sauvegardé" et réinitialise l'interface utilisateur à l'endroit où elle se trouvait. Une fois que vous avez réussi à représenter et à réinitialiser l'état, vous devez considérer comment vous allez l'enregistrer et le récupérer.

Vous pouvez enregistrer c'est un cookie, si ce n'est pas trop grand. Lorsque la page se charge, vérifiez le cookie et analysez les données et exécutez votre routine de réinitialisation pour restaurer l'interface utilisateur.

Un autre endroit persistant pour stocker des données est dans window.name, qui peut contenir une chaîne de 2mb maximum. Même chose qu'un cookie.

La troisième méthode consiste à stocker les informations d'état dans l'URL: document.location = document.location + "#" + stateData. Vous pouvez ensuite analyser ce qu'il y a dans l'URL pour récupérer vos données d'état. La méthode "url/hash" est en train de devenir la technique préférée car elle permet le bookmarking et est une nouvelle spécification permettant aux robots de recherche de lire facilement les sites basés sur ajax.

Voir: http://code.google.com/intl/sv-SE/web/ajaxcrawling/docs/specification.html

Answer 3

vous pouvez utiliser un champ caché div et modifier vos js pour définir le texte caché à l'id du champ élargi de clic. Votre fonction pourrait vérifier la valeur du texte caché et montrer le champ qui correspond à l'identifiant de texte caché.

dans votre page:

<div class="hidden" style="display:none;" /> 

dans votre .js

$(function() { 
     $('tr.subCategory') 
      .css("cursor", "pointer") 
      .attr("title", "Click to expand/collapse") 
      .click(function() { 
     $(this).siblings('.RegText-' + this.id).toggle(); 
       $('.hidden').text(this.id); // set the hidden field to the id shown 
      }); 
      $('tr[@class^=RegText-]').hide().children('td'); 
      $('#' + $('.hidden').text() + ''').show(); // show the id set in hidden field 
    })