[Résolu] Système de like sur plusieurs articles ...

Bonjour à tous,

en fait, j'essaie de mettre en place un système de vote sur plusieurs articles mais je n'arrive pas à intercepter les événements sur les boutons like et dislike de ces différents articles.

J'ai un id sur chaque article qui concerne le vote à propos de cet article. En fait, l'id est composé de la chaîne de caractères "vote_" + le numéro de l'article qui est dynamique et qui se trouve notamment dans la "variable" <data-ref_id>.

Vous pouvez avoir un aperçu du code à l'adresse suivante :

https://codepen.io/anon/pen/rXObpL

Avez-vous une idée de comment je peux m'y prendre pour que les boutons réagissent convenablement en fonction de l'article auquel ils sont attachés ?

Merci d'avance

Bonne soirée

Thierry

Et l'eau,

codepen a écrit :
ReferenceError: $ is not defined

Je te laisse le soin de comprendre ton erreur (ou omission....)
Modifié par niuxe (23 Jul 2019 - 14:21)

Bonjour Niuxe,

tout d'abord, merci pour votre réponse.

Je ne comprends pas ce que vous voulez me faire passer comme message. Quand je clique sur le lien, j'arrive bien sur Codepen avec le code source.

Voici un nouveau lien :

https://codepen.io/anon/pen/OKMZor

Merci d'avance

Bonne journée
Thierry

Bonjour THIRT,

Ajoutez seulement ceci à la fin de la page HTML : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Afin d'inclure la bibliothèque JavaScript (jQuery), cela devrait mieux se passer .

Bonne continuation,
Francis

Bonjour Francis,

merci pour votre aide.

Je ne savais pas que je devais rajouter la référence à la librairie jQuery dans codepen. C'est logique mais il fallait le savoir. -:)

En effet, maintenant, la page réagit bien au code jQuery.

https://codepen.io/anon/pen/OKMZor

Par contre, je me demande comment faire pour que ça réagisse également sur les autres articles et pas seulement sur le 1er article ?

Le but est de rendre le système de like/dislike dynamique.

La div qui a l'id "vote_1", "vote_2", "vote_3" est généré dynamiquement comme vous vous en doutez c'est-à-dire la chaîne de caractères "vote_" + le numéro de l'article.

 var $vote = $('#vote_1');

Donc, je me demande comment faire pour intercepter le bon click sur l'article concerné ?

Merci d'avance

Bonne journée
Thierry

Enlève ta dépendance....

Ensuite, tu devrais boucler sur $('.vote')

Bonsoir Niuxe,

tout d'abord, merci pour votre réponse.

Qu'entendez-vous par enlever la dépendance ? Je suppose que c'est pour l'événement click sur le bouton like ou dislike que je dois simplement tester sur la classe "vote_like" ou "vote_dislike".

Je dois donc simplement mettre :

$('.vote_like').click(function(e)

à la place de :

$('.vote_like', $vote).click(function(e)

Et par boucler, vous voulez dire que je dois utiliser une boucle "each" sur les classes "vote_like" ou "vote_dislike" ?

Merci d'avance

Bonne soirée

Thierry

THIRT05 a écrit :

....
Qu'entendez-vous par enlever la dépendance ? Je suppose que c'est pour l'événement click sur le bouton like ou dislike que je dois simplement tester sur la classe "vote_like" ou "vote_dislike".

Je dois donc simplement mettre :

$('.vote_like').click(function(e)

à la place de :

$('.vote_like', $vote).click(function(e)

....

oui, puisque $vote est #vote (de mémoire (j'ai pas le code sous les yeux))

THIRT05 a écrit :

Et par boucler, vous voulez dire que je dois utiliser une boucle "each" sur les classes "vote_like" ou "vote_dislike" ?

oui puisqu'il faudra bien que tu saches où placer ton compteur +1 ou compteur -1. Là pour le coup, tu cliques pour tout le monde....

Bonjour Niuxe,

pour ce qui est de la boucle, je pense que je dois écrire le code suivant mais je n'arrive pas à le faire fonctionner convenablement :

$.each($('.vote_like').on('click', function (index, value) {
  alert(index + ':' + $(value).text());
}));

Voici le code HTML :

	<div class="article">
		<div class="first_line_header clearfix">
			<div class="header_title_1">
				<span class="header_title_text">Article 1</span>
			</div>
			<div class="header_title_2">
				le retour du beau temps
			</div>
		</div>
		<div class="second_line_header clearfix">
			<div class="vote " id="vote" data-ref="ARTICLE" data-ref_id="1">
				<div class="vote_btns">
					<button class="vote_btn vote_like"><span id="like_count">0</span></button>
					<button class="vote_btn vote_dislike"><span id="dislike_count">0</span></button>
				</div>
			</div>
		</div>
	</div>
	<div class="article">
		<div class="first_line_header clearfix">
			<div class="header_title_1">
				<span class="header_title_text">Article 2</span>
			</div>
			<div class="header_title_2">
				A la recherche du temps perdu
			</div>
		</div>
		<div class="second_line_header clearfix">
			<div class="vote " id="vote" data-ref="ARTICLE" data-ref_id="2">
				<div class="vote_btns">
					<button class="vote_btn vote_like"><span id="like_count">0</span></button>
					<button class="vote_btn vote_dislike"><span id="dislike_count">0</span></button>
				</div>
			</div>
		</div>
	</div>
	<div class="article">
		<div class="first_line_header clearfix">
			<div class="header_title_1">
				<span class="header_title_text">Article 3</span>
			</div>
			<div class="header_title_2">
				Au coin perdu
			</div>
		</div>
		<div class="second_line_header clearfix">
			<div class="vote " id="vote" data-ref="ARTICLE" data-ref_id="3">
				<div class="vote_btns">
					<button class="vote_btn vote_like"><span id="like_count">0</span></button>
					<button class="vote_btn vote_dislike"><span id="dislike_count">0</span></button>
				</div>
			</div>
		</div>
	</div>

Je me demande comment je peux accéder aux différentes variables à partir de ma boucle : data-ref_id, la valeur du like_count, la valeur du like_discount, ...

Merci d'avance

Bonne journée
Thierry

$('.vote_dislike', $vote)

Celle ligne je ne la comprend pas.

mais tant pis, j'ai tout supprimer.

https://codepen.io/JUSEN/pen/XvdONp

Quand tu click sur un élément , ta fonction anonyme se déclenche avec

$('.vote_dislike').click(function(e)

Il ne faut pas oublier le "context"... à l'intérieur, le fais d'utiliser $(this) permet d'utiliser le noeud courant, c'est à dire la balise sur laquelle tu as cliquer.
Modifié par JENCAL (24 Jul 2019 - 16:00)

Bonjour Jencal et Niuxe,

merci à vous deux pour votre aide.

En fait, j'ai fait un exemple dans codepen avec mon code en entier sauf le fichier PHP que j'appelle via Ajax pour mettre à jour les compteurs dans la base de données.

Voici le lien :

https://codepen.io/anon/pen/gVrqOd

En fait, comme vous pourrez le remarquer, le système fonctionne à merveille pour le 1er article mais quand on clique sur les autres articles, le système ne réagit pas.

Merci d'avance

Bonne journée
Thierry
Modifié par THIRT05 (24 Jul 2019 - 16:19)

Deux choses :

d'une, tu ne peux pas appelé ton $.post('like_dislike.php') sur codepen.
de deux, si tu avais testé mon code tu aurais vu que toutes les bouttons fonctionne. à toi de t'en inspirer et m'enlever ton $('.vote_like', $vote).

Bonjour Jencal,

en effet, je n'avais pas fait attention à votre exemple qui fonctionne parfaitement.

Encore merci pour votre aide.

Bonne journée
Thierry

Après je t'invite VRAIMENT VRAIMENT à regarder cette vidéo

https://www.youtube.com/watch?v=lygMPwUj9yU

c'est un gars que j'ai eu en formation pendant ma deuxième année (il y a 8 ans) et maintenant il est bien meilleurs, et il a fait une vidéo tuto sur les likes/dislike ajax.

Très intéressant pour ton cas.

Cette vidéo est dédié à Symfony mais peu importe la logique reste la même.
Modifié par JENCAL (24 Jul 2019 - 16:33)

Bonjour Jencal,

merci beaucoup pour votre aide.

Passez une agréable soirée.
Thierry

JENCAL a écrit :
$('.vote_dislike', $vote)

Celle ligne je ne la comprend pas.

c'est un raccourci (plus performant de mémoire) de :

var $vote = $('#vote_1');

$vote.find('.vote_dislike')

@THIRT05 : je regarderai vos réponses plus tard dans la soirée. Là je suis un peu occupé
Modifié par niuxe (24 Jul 2019 - 19:41)

niuxe a écrit :


c'est un raccourci (plus performant de mémoire) de :

var $vote = $('#vote_1');

$vote.find('.vote_dislike')

oO... ok je ne savais pas du tout, pas mal pas mal merci.

Bonjour Niuxe, Jencal,

j'ai mis une version adaptée sur codepen.

https://codepen.io/anon/pen/gVrqOd

Pourriez-vous jeter un coup d'oeil et me dire s'il y a des choses qui ne vont pas ?

Comment puis-je accéder facilement à la propriété "$('#like_count')" de l'article concerné ?

Merci d'avance

Bonne journée
Thierry

Salut

Oui il y a un truc qui va pas,

Un ID c'est un identifiant UNIQUE et dans ton code HTML il y a plusieurs ID like_count
Ce qui n'est pas bon, il faut remplacer par une classe.

Une fois que c'est remplacer par une classe, tu peux facilement récupère le likecount comme j'avais fait dans mon codepen.