8768 sujets

Développement web côté serveur, CMS

Évènement click dans une boucle foreach en PHP

Bonjour tout le monde,

J'ai une boucle foreach en php pour parcourir une liste de commentaire sur un post dans mon forum. Dans cette boucle j'y insère une div avec le contenu etc.., dans cette div j'ai deux liens permettant d'ajouter +1 ou -1 aux votes du message. J'utilise donc un onclick="" avec de l'ajax pour faire cela.

Cependant mon problème est que dès que je clique sur un des messages, le vote se modifie sur le premier message. Je me suis renseigné à ce sujet, je dois apparemment créer une boucle for en javascript pour régler le problème. Je ne sais pas où la mettre et comment la faire. Merci d'avance à ceux qui prendront le temps de me répondre Smiley biggrin

Mon code :

foreach ($list_messages_topic as $a => $b) : ?>

                        <div class="d-flex flex-row">
                            <div class="d-flex flex-column justify-content-center me-3 py-3 mb-4 mt-3">
                                <a href="javascript:void(0)" onclick="voteMessageUp(<?= $b['idMessage'] ?>)"><img src="../../img/up-arrow.png" class="mb-1 vote-img" alt=""></a>
                                <p class="text-center m-0 fz-text" id="vote-number-message"><?= $b['messageVote'] ?></p>
                                <a href="javascript:void(0)" onclick="voteMessageDown(<?= $b['idMessage'] ?>)"><img src="../../img/down-arrow.png" class="mt-1 vote-img" alt=""></a>
                            </div>
                        </div>

                    <?php endforeach; ?>
Pour la boucle js, j'ai trouvé ça sur internet :

function foo(){
	for (i=0;i<10;i++){
		var MonDiv=document.createElement('DIV');
		MonDiv.innerHTML="div " +i;
		MonDiv.indice=i;
		MonDiv.onclick=function(){alert(this.indice)}
		document.body.appendChild(MonDiv);
	}
}


Ce n'est pas adapté à mes div pour l'instant car je ne sais pas quoi remplacer dans cette boucle
aaaah pardon ! J'ai hésité sur ce que je devais envoyer ^^

J'ai utilisé ce que tu m'as envoyé la dernière fois Smiley cligne J'ai juste utilisé POST à la place de GET

var voteNumberMessage = document.getElementById("vote-number-message");

function voteMessageUp(messageID) {

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4 && xhr.status == 200) {

            voteNumberMessage.innerHTML = xhr.response;

            console.log(messageID);

        }
    };

    xhr.open("POST", 'ajax-folder-message/voteMessageUp.php', true);

    xhr.responseType = "text";

    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xhr.send("id=" + messageID);

}

Modifié par heraclys (10 Jan 2021 - 15:27)
Voici ce que je te propose, remplacer en html le id: 
<p class="text-center m-0 fz-text" id="vote-number-message<?= $b['idMessage'] ?>"><?= $b['messageVote'] ?></p>
et en js 
function voteMessageUp(messageID) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", 'ajax-folder-message/voteMessageUp.php, true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('vote-number-message'+messageID).innerHTML = xhttp.responseText;
    }
  };
}
Je pense que tu peux ne faire qu'une seule fonction vote en passant en paramètre en plus soit 'plus', soit 'moins' que tu passes au script php qui n'aura plus qu'à interpréter..
C'est vrai qu'en pensant comme ça, c'est plus simple. Je n'ai pas encore cette qualité de réflexion, merci à toi
Sujet clos
Aller à