Jquery Show() div via sélecteur de type classe en l'isolant via rel

Bonjour tout le monde !

Voilà je cherche à créer un système de post avec commentaire comme les statuts Facebook.

Admettons que je créé un bouton "commenter", je veux que lorsque je clique dessus il fasse apparaître en bas de la liste de commentaires une div avec un text area et un bouton pour envoyer son contenu.

Pour cela je génère dynamiquement (via php) en bas de chaque nouveau statut une div dont le css est défini via une classe dont le display est réglé sur none afin qu'elle soit invisible.

Je voudrais créer une fonction jquery affichant la div, lorsque je le fais, comme je dois passer par la classe de la div toutes les div en bas de chaque statut s'affichent lorsque je clique sur le bouton "commenter". J'aimerai donc passer par l'attribut rel afin de pouvoir faire apparaître seulement la div en rapport avec le bouton commenter. Mais je ne sais pas exactement comment faire.

 $(".commentlink[ rel]").each(click(function () {
    $(".modulable[ rel]").show();
    })); 

Faites pas attention aux espaces dans le rel c'est parce que sinan le site l'interprète comme un smiley !

ici .commentlink et la class du bouton commenter et .modulable est la classe à afficher. Biensur ceci ne marche pas... quelqu'un pourrait-il m'aider ?

Merci beaucoup
Modifié par Monoski (30 Sep 2011 - 21:34)

En fait, il faudrait que .commentlink et .modulable soient, soit dans un div conteneur (qui ne contiendra pas d'autres .commentlink et .modulable) ou soit que .modulable soit dans .commentlink


dans le 1er cas ça donne :

$(".commentlink[ rel]").each(click(function () {
    $(this).closest(".conteneur").find(".modulable[ rel]").show();
})); 

dans le 2ème cas ça donne :

$(".commentlink[ rel]").each(click(function () {
    $(this).find(".modulable[ rel]").show();
})); 

Hum j'essaie ça et je te tiens au courant, merci de ton aide en tout cas.

Hum bon j'ai quelques difficultés là. Je te montre mon code et puis ça me poussera à réfléchir en le nettoyant :

       <? 
								
$recup2 = mysql_query("requete") or die(mysql_error());
 
while ($afficher = mysql_fetch_assoc($recup2))
{
	$info_id = $afficher['info_id'];
	$comment = mysql_query("superequetejointe") or die(mysql_error());
	$jaime = mysql_query("idem") or die(mysql_error());
	$like_info = mysql_fetch_array($jaime);
echo'
<div class="news">
	<div class="pseudo">
		<a href="membres/'.$afficher['info_id_poster'].'">'.$afficher['user_prenom'].' '.$afficher['user_nom'].'</a>
	</div>
	<span class="message">'.$afficher['info_message'].'</span><br />
	<span class="under_msg">
	<a href="membres/'.$afficher['info_id_poster'].'">J\'aime</a> · 
	<span class="commentlink" rel="'.$afficher['info_id'].'">Commenter</span> Le '.$afficher['info_date'].'</span><br />
	'; 
	
	
	
	if(mysql_num_rows($jaime)==1){ echo '<div class="like" rel="'.$info_id.'">'.mysql_num_rows($jaime).' personne aime ça.</div>'; }
elseif (mysql_num_rows($jaime)>1){ echo '<div class="like" rel="'.$info_id.'">'.mysql_num_rows($jaime).' personnes aiment ça.</div>'; }




while($commenter = mysql_fetch_assoc($comment))
{
	echo'
	<div class="comment">
		<div class="pseudo">
			<a href="membres/'.$commenter['info_comment_id_poster'].'">'.$commenter['user_prenom'].' '.$commenter['user_nom'].'
			</a>
		</div>
		<span class="message">'.$commenter['info_comment_message'].'
		</span><br />
		<span class="under_msg">Le '.$commenter['info_comment_date'].' · 
		<a href="membres/'.$commenter['info_comment_id_poster'].'"> J\'aime
		</a>
		</span>
	</div>
	'; // Fin de .comment
}?> 
	<div class="modulable" rel="<? echo $afficher['info_id']; ?>">
		<div class="msg_box">
			<form id="form2" name="form2" method="post" action="" >
				<label for="textarea" ></label>
				<textarea name="message" class="posting"></textarea>
			</form> 

		</div> <!-- Fin de .msg_box -->
			<input type="submit" onclick="" name="button" class="button" value="Commenter" />

	</div> <!-- Fin de .modulable -->
    
</div> <!-- Fin de .news -->

<? }
?>

Modifié par Monoski (01 Oct 2011 - 18:16)

Il y a un conteneur qui contient une seule fois comment link et une seule fois modulable : c'est .news

pourtant si je fais ça :

$(".commentlink[ rel]").each(click(function () {

$(this).closest(".news").find(".modulable[ rel]").show();

}));


Cela ne fonctionne pas

Tu aurais une démo en ligne ? (pas simple de t'aider sans voir vraiment la source générée par ton script php)

Je t'ai envoyé en MP la page et les log

Tu pourras te repérer facilement ça ressemble bcp à FB, c'est un projet simple pour communiquer avec ma promo (je suis juriste pas programmeur).

C'est le "commenter" pour les statuts pas pour les commentaires.

J'ai regardé rapidos (je regarderais un peu plus en détail ce soir peut-être), et déjà tu as une erreur js sur ta page ("click" is not defined).

En fait, tu demandes à jQuery d'associer un évènement "click" à un élément du DOM, mais cet élément n'existe pas encore. Les actions jQuery doivent être faites au chargement du DOM, c'est à dire :

jQuery(function ($) {
	
	$(".commentlink[rel]").each(click(function () {
		$(this).closest(".news").find(".modulable[rel]").show();
	})); 
		
});

Ensuite, les bonnes pratiques d'utilisation du js veulent que les scripts soient chargés à la fin du body et non pas au début (ça permet de charger les js à la fin, sans entraver le chargement des css et de l'html).

Et enfin, tu as sûrement des scripts qui viennent en concurrence avec jQuery, et tu seras sûrement amené à utiliser la fonction jQuery.noConflict() pour éviter les incompatibilités. Je pense notamment à tes scripts qui appellent des fonctions XMLHttpRequest (dans connect.js par exemple). Ce type de requête est gérée en interne par jQuery via les fonctions ajax(), get(), post() (et bien gérées pour assurer une compatibilité maximum avec les différents navigateurs).

Donc regarde aussi si tu ne peux pas refaire tes autres scripts via jQuery, tu éviteras pas mal de problèmes.
Modifié par ZeB_panam (03 Oct 2011 - 08:13)

Merci pour ton aide. C'est super sympa de me donner tous ces conseils, je suis vraiment pas bon en programmation ^^

Une autre question (en fait jcrois que c'est ce que tu as commencé à m'expliquer vis-à-vis des DOM), en utilisant "jQuery(function ($) {" tel que tu me l'as montré, est-ce que mes scripts js fonctionneront sur des éléments qui sont créés via Ajax ?

Par exemple quand je fais défiler des statuts qui sont plus anciens, j'utilise une pagination similaire à Facebook, mais ce contenu créé via Ajax n'intègre pas mes scripts comme celui permettant de voir qui aime tel ou tel statut.

Sinon, comment dois-je procéder ?


Merci pour tout en tout cas c'est vraiment super de trouver des personnes comme toi sur le web

Monoski a écrit :

Une autre question (en fait jcrois que c'est ce que tu as commencé à m'expliquer vis-à-vis des DOM), en utilisant "jQuery(function ($) {" tel que tu me l'as montré, est-ce que mes scripts js fonctionneront sur des éléments qui sont créés via Ajax ?

Par exemple quand je fais défiler des statuts qui sont plus anciens, j'utilise une pagination similaire à Facebook, mais ce contenu créé via Ajax n'intègre pas mes scripts comme celui permettant de voir qui aime tel ou tel statut.

Sinon, comment dois-je procéder ?


Merci pour tout en tout cas c'est vraiment super de trouver des personnes comme toi sur le web

Alors d'abord de rien

Ensuite, le :

jQuery(function ($) {
});

sert à plusieurs choses. D'une à forcer jQuery a être initialisé après le chargement complet du DOM, de deux à mapper correctement l'objet jQuery lors d'un appel avec "$".

Bref, cela ne sert pas à faire fonctionner tes scripts sur des éléments créés dynamiquement. Pour cela, il existe deux évènements chez jQuery : live() et delegate().

Ok super, je vais me retaper toutes mes requêtes pour les adapter à jquery. Et je potasserai après les évènements, enfin j'avais déjà lu live() et j'avais faillis poster par rapport à ça entre temps ^^

En tout cas merci énormément pour ton aide. C'est super

Si t'as un exemple d'utilisation de live afin de réutiliser un script donné je prends, mais sinon ce n'est pas grave je m'en sortirai seul à partir de maintenant

Je te souhaite une excellente fin de journée.

Arf au fait, l'erreur dont tu m'as parlé ("click" is not defined) après utilisation de

jQuery(function ($) {

});

existe toujours (d'après Firebug), donc là je ne comprends pas trop. J'ai du mettre le script en commentaire sinon les suivant ne s'exécutaient pas.