11548 sujets

JavaScript, DOM et API Web HTML5

JQuery : connaitre l'effet concret d'un "slideToggle" sur

Bonjour,
J'ai un petit souci avec le site que je crée. La colonne de gauche est composée de plusieurs panneaux indépendants ("widgets", dans la suite). Via jQuery UI ils se déplacent les uns par rapport aux autres (.sortable()), via l'ajout d'une classe 'hidden' (avec un display : none) ils disparaissent visuellement et via un slideToggle, leur contenu se baisse ou se lève en cliquant sur la barre de titre du widget. Inspiré de iGoogle, ça marche et c'est plutôt cool.
L'étape suivante est donc de sauvegarder leur état pour pas qu'il soit réinitialisé à chaque changement de page. Via JSON j'envoie donc plusieurs éléments à chaque modification d'un widget à une table mysql : le membre_id de celui qui a cliqué, l'ordre du widget dans la colonne via un index() et leur état : 0 1 ou 2 selon qu'il soit caché entièrement, replié, ou ouvert.
La position du widget dans la colonne est bien sauvegardée.
Les états 0 et 2 sont bien sauvegardés également. Mais pour l'état 1, pas moyen. Et j'ai du mal à comprendre pourquoi.

Structure d'un widget : 

<div class="widget" id="widget_sonNom">
   <h3><span class="fermeture"></span>Son Nom</h3>
   <div class="widget_contenu">
        <p>son contenu</p>
   </div>
</div>


La classe fermeture dans le h3 sert à insérer une petite croix pour fermer le widget. Au clic, ça ajoute une classe "hidden" à la div classe "widget". De fait, le widget n'apparait plus.
Au clic sur le h3, ça déclenche une fonction slideToggle concernant la div de classe widget_contenu.
Et donc en cliquant/glissant sur le h3, ça déplace le widget là où on veut (au sein de la colonne).
Voilà pour le widget.

J'ai ensuite une fonction updateWidget qui dit notamment : 

$(".widget").each(function(){  
            //Trouve l'état du widget (0 = fermé, 1=réduit, 2=ouvert)
			if($(this).hasClass('hidden')) {var collapsed=0;} 
			else if($(this).find('.widget_contenu').css('display')=="none") {var collapsed=1;} 
			else {var collapsed=2;}

Dans la suite, elle détermine l'id du widget puis sa position, met le tout dans un tableau et le balance au serveur. Cette partie fonctionne sans souci, et les données sont correctement traitées. C'est juste l'info état qui prend la valeur 0 ou 2, mais jamais 1.

C'est donc ma deuxième condition qui ne marche pas alors que quand je la teste via firebug, elle m'indique bien true ou false quand il faut.

Si quelqu'un a une idée pour m'orienter, je suis preneur !
Egalement, peut-on connaitre autrement que par un css('display') si un contenu est levé ou baissé via slideToggle ?

Merci !
Bon le problème est quasi-résolu.
Pour info, si un jour quelqu'un veut faire quelque chose de plus ou moins similaire, la solution est de décomposer le slideToggle en une fonction toggle prenant deux fonctions, l'une baissant le panneau et ajoutant une classe, et l'autre faisant l'inverse.
Là il me reste à trouver pourquoi quand je clique une première fois au chargement de la page il ne se passe rien pour chaque widget. Tout s'active à partir du moment où le widget a été cliqué une première fois.
Si quelqu'un a une idée...
Sujet clos
Aller à