[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

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

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

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.

Bonjour Jencal et Niuxe,
tout d'abord, je tenais encore à vous remercier pour votre aide et vos conseils.
Finalement, j'ai trouvé une solution à mon problème qui simplifie pas mal de choses.
En fait, j'ai décidé d'utiliser uniquement des id et, afin de pouvoir identifier les bons ids, je renvoie l'id de mon article en plus des compteurs dans le tableau json de ma page PHP. De cette façon, via une concaténation du nom de l'id et de l'id de l'article, je peux donc accéder directement à cet id.
Passez un agréable week-end
Thierry

P.S. : Jencal, as-tu le nom de la personne ou de la société qui a fait la vidéo sur Ajax & Symphony ? Apparemment, la personne s'appelle Lior CHAMLA.
Modifié par THIRT05 (31 Jul 2019 - 13:28)