[jQuery] hide("slow") défaillant

[KnockedMaster]

'alut tout le monde,

Dans la série boulet, voilà un autre souci que je rencontre en ce moment : un formulaire de commentaires, des commentaires, des boutons pour afficher/masquer les commentaires. Le show fonctionne bien, par contre le hide ne fonctionne pas.

Au départ, le div est stylé display:none; Quand j'affiche, ça marche. Pour masquer, peau de balle. Pour info, le fichier comments.tpl.php est appelé par content.php, fichier chargé d'effectuer toutes les requêtes et d'appeler les templates, ensuite sortie en affichage.

 $(document).ready(function(){

		    $('#showCom').click(function(){
			 $('#commentsBox').show("slow");
		   });

		   $('#hideCom').click(function(){
			 $('#commentsBox').hide("slow");
		   });

		});

Une idée d'où ça peut venir ?

[captain_torche]

Es-tu sûr que le bouton a le bon id ?

Peux-tu mettre une alerte dans la fonction pour voir si elle est déclenchée ?

[KnockedMaster]

Oui c'est le bon id, et alert fonctionne ...

[captain_torche]

Pourrais-tu mettre un lien de test en ligne ?

[KnockedMaster]

Non malheureusement, le site tourne en local, la version en ligne est différente à tous les niveaux. Bon tant pis, la chasse reste ouverte, je vais chercher et si je trouve je posterai la solution. Merci quand même

[captain_torche]

Tu peux juste copier le rendu HTML de la page en question ? Ca serait quand même plus simple

[Ernestine]

Bonjour,

C'est normal que ça ne marche pas. Pour exécuter deux fonctions différentes lors de clics alternatifs sur un élément, c'est la fonction toggle() qu'il faut utiliser. Cette fonction prend en argument les deux fonctions à exécuter alternativement (et éventuellement plusieurs autres fonctions). Dans ton cas ça donnerait :

$(document).ready(function() {				  
	$('#showCom').toggle(function() {
		$('#commentsBox').show("slow");
	},
	function() {
		$('#commentsBox').hide("slow");
	});				   
});

Plus d'infos ici : http://api.jquery.com/toggle-event/

[captain_torche]

Sauf que là, il y a deux IDs différents, donc j'imagine deux boutons possibles.

[Ernestine]

Ah oui, je n'avais pas bien regardé, désolée.

En effet dans ce cas, ça devrait logiquement fonctionner.

[KnockedMaster]

Oui en effet, il y a deux boutons différents, avec un id différent, c'est la boîte à afficher qui reste commune. Je vais tester avec un toogle.

Sinon le code html est celui-ci :

Commentaires (<span id="nbComments">18</span>)

<div id="jQButtonsGrayBox">
<button class="jQButtonsGray" id="showCom"><img alt="icone" src="adder.png"> Afficher</button>
<button class="jQButtonsGray" id="hideCom"><img alt="icone" src="minder.png"> Masquer</button>
</div>

<div id="ajax_content"></div>
<div class="myform_Comment" id="stylized_Comment">
<form method="" action="">
<input type="hidden" value="" id="city" name="city"/>
<textarea rows="6" id="msg" name="msg"/>
<label for="name">Pseudo <span class="small">Max 32 car.</span></label><input type="text" maxlength="30" size="16" id="name" name="name"/><label for="email">E-mail <span class="small">Valid email</span></label> <input type="text" size="16" id="email" name="email"/>
<label for="url">Site <span class="small">Url site ou blog</span></label> <input type="text" size="16" id="url" name="url"/><br/>
<label for="captcha">Anti-Spam <span class="small">Résultat</span></label><input type="text" maxlength="5" size="2" id="captcha" name="captcha"/><img alt="captcha" src="http://localhost/karpeace_v7.0/all_domains/inc/captcha.inc.php" id="imgCaptchaCom"/>
<input type="hidden" value="1" id="posted_com" name="posted_com"/>
<input type="hidden" value="PAGE" id="page" name="page"/>
<input type="hidden" value="portail" id="domaine" name="domaine"/>
<input type="hidden" value="2" id="deepness" name="deepness"/>
<input type="hidden" value="18" id="nbc" name="nbc"/>

<button onclick="afficheMsgFormComment('2');" id="validComButton" type="button"/>
</form>
<div class="spacer"/></div>
</div>

<div id="commentsBox" style="display: block;"> -----------> La boîte à afficher/masquer
<div class="commentsBox">
<div class="time"><img alt="avatar" src="" class="avatar"/><span class="timeDateDM">25-11</span><br/><span class="timeDateY">2007</span><span class="timeDateH"> 00:00:00</span></div><div class="commentTip"/><div class="comment"><span class="commentAuthor">pivao</span> <div class="comTxt">super site<br/>

...

Toutes les balises sont bien fermées, donc ce n'est pas de ce côté là ...

Modifié 7 Février 2012 par KnockedMaster

[Ernestine]

Toutes les balises sont bien fermées, donc ce n'est pas de ce côté là ...

Ah bon ? Tu es sûr ?

Pourtant on voit un joli :

<textarea rows="6" id="msg" name="msg"/>

Alors qu'il faudrait mettre :

<textarea rows="6" cols="40" id="msg" name="msg"></textarea>

En effet, la balise textarea n'est pas auto-fermante. Il est fort possible que cette petite correction te permette de faire fonctionner le script.

(note au passage que l'attribut cols de textarea est également obligatoire, bien qu'il n'ait aucun rapport avec ton problème, il faut le mettre).