Forum d'entraide PHPFrance

Bonjour j'ai créé un système de Like/Dislike sur une page, tous fonctionne correctement côté PHP.
Mon souci ici est de le rendre plus interactif c'est a dire modifier les likes ou dislikes sur la page directement à chaque clique.
Voila mon code:
HTML | PHP :

 
<div class="Like-Dislike" id="likeDislike">
    <?php
        $likes = $bdd->query('SELECT id FROM art WHERE id_article ='.$id);
        $likes = $likes->rowCount();
        $dislikes = $bdd->query('SELECT id FROM art WHERE id_article ='.$id);
        $dislikes = $dislikes->rowCount();
    ?>
   <a class="actionlike" href="likeDislike.php?type=1&id=<?= $article->id; ?>"><?= $likes ?></a>
   <a class="actionlike" href="likeDislike.php?type=2&id=<?= $article->id; ?>"><?= $dislikes ?></a>
</div>

JS :

$(".actionlike").click(function(e){
    e.preventDefault();
    var xhr = new XMLHttpRequest();
    var $a = $(this);
    var url = $a.attr('href');
    function like_dislike(){
        $("#LikeDislike").load(" #LikeDislike");
    }

    xhr.onreadystatechange = function(){
        if(this.readyState == 4 && this.status == 200) {
            var response = this.response;
            if (response.success) {
                like_dislike();
             } else { alert(response.msg); }
    }else if(this.readyState == 4){ alert("Une erreur est survenue..."); }
};
                    
 xhr.open("POST", url, true);
 xhr.responseType = "json";
 xhr.send();
});

Mon problème c'est que se script ne fonctionne qu'une seule fois.
Merci de m'aider!!!

Il faut que tu avances un peu dans ton debugage pour trouver à quel moment ça ne fonctionne pas comme prévu.

As-tu regarder la console de ton navigateur pour vérifier qu'il n'y a pas d'erreur javascript ?
Pour accéder à la console, il faut faire Ctrl+Maj+i dans Firefox ou Chrome, puis onglet Console.

Tu peux aussi regarder dans l'onglet Réseau/Network pour voir si tes requêtes ajax sont bien envoyées et renvoient ce que tu veux.


A noter un truc un peu étrange (mais pas forcément à l'origine de ton pb), tu utilises visiblement jquery mais tu n'utilises pas la fonction $.post() de jquery pour faire ta requête XHR alors que ça serait beaucoup plus lisible : https://api.jquery.com/jquery.post/

Le problème ici c'est que le script ne fonctionne qu'une seule fois.
Donc au premier clique tous est normal (insertion du liké où dislike en dB et actualisation de la div) mais l'utilisateur reclique à nouveau sa requête vas être synchrone en ignorant le js

Il faut que tu avances davantage dans ton debugage.
Y a-t-il des messages d'erreur dans la console ?

Je sais pas si c'est lié, mais j'ai souvent eu des soucis du même genre.

avec un $(".actionlike").click(function(e){ ...
cela ne s'applique que au class actionlike présent dès le début du script si il est remplacé ou créer par une instruction l'event ne sera pas pris en compte. j'utilise du coup une méthode différentes delegate()

Bonjour merci déjà pour vos réponses.
Sa doit être sa puisque je n'ai aucunes erreurs dans la console.

Je viens de me renseigner sur la délégation() en jquery.
Mais je n'arrive pas à l'utiliser, peut être j'utilise la mauvaise syntaxe.
$(".actionlike").delegate("click", function(e){....

S'il te plaît tu peut me montré un exemple de son utilisation dans ce cas?

Tout compte fais j'ai finis par comprendre la méthode delegate() et tous fonctionne correctement.

Merci encore