Like / Unlike
Bonjour,
Voila je rencontre un petit problème avec mon code.
code du qui affiche le bouton :
<?php if(isset($sessid)) { ?>
<?php
$req3 = $bdd->query("SELECT COUNT(*) AS nbrlq FROM likes WHERE likes.reponses_id = $id_reponses AND likes.membres_id = $sessid");
$data3 = $req3->fetch();
?>
<?php if($data3['nbrlq'] == 0) { ?>
<form method="POST" id="likeForm">
<input type="hidden" id="reponsesin_id" name="reponsesin_id" value="<?= $questionsinfos['id_reponses']; ?>">
<button type="submit" name="addlike" style="outline: 0;background: none;border: 0;" class="pull-right text-muted"><font size="5pt" color="#FAFAFA"><i class="fa fa-heart"></i></font></button>
</form>
<?php } else { ?>
<form method="POST" id="unlikeForm">
<input type="hidden" id="reponsesinu_id" name="reponsesinu_id" value="<?= $questionsinfos['id_reponses']; ?>">
<button type="submit" name="deletelike" style="outline: 0;background: none;border: 0;" class="pull-right text-muted"><font size="5pt" color="#E53935"><i class="fa fa-heart"></i></font></button>
</form>
<?php } } ?>J'aimerais pouvoir lorsqu'on appuies sur le bouton l'icon change de couleur sans actualiser la page, car pour le momment j'ai fai une fonction qui fait en sorte que la page ne s'actualise pas quand on met un j'aime mais maintenant je voudrais que l'icone change ! :)
Fonction js que retire le like
$(function() {
$("#unlikeForm").submit(function(){
reponsesinu_id = $(this).find("input[name=reponsesinu_id]").val();
$.post("../php/unlikeactions.php",{reponsesinu_id: reponsesinu_id};
return false;
});
});Fonction js que met le like
$(function() {
$("#likeForm").submit(function(){
reponsesin_id = $(this).find("input[name=reponsesin_id]").val();
$.post("../php/likeactions.php",{reponsesin_id: reponsesin_id};
return false;
});
});
16 réponses
La fonction $.post de jQuery contient un 3ème paramètre qui est un callback lorsque la requête est réussie :
https://api.jquery.com/jQuery.post/
Dans ton cas, tu peux donc faire ceci :
$.post("../php/unlikeactions.php", {reponsesinu_id: reponsesinu_id}, function(data) {
// Changer couleur bouton ici
})Le paramètre "data" contient le contenu affiché par "unlikeactions.php".
Sinon tu peux chainer avec les différents callbacks "done", "fail", "always" comme indiqué sur la doc.
Merci de ton aide, mais j'aimerais savoir qu'elle est le code pour pouvoir modifier la couleur, car j'ai déj tout essayer ^^
Tu peux ajouter/retirer une classe css à ton élément button, avec les fonctions addClass et removeClass.
$('button[name="addlike"]').addClass('liked');Ou bien directement modifier le style du boutton avec la fonction css.
$('button[name="addlike"]').css('color', '#008000');Par contre, concernant ton HTML, je te déconseille d'utiliser les balises "font" et de mettre le style directement au niveau de tes balises. Tu vas vite galérer à modifier dynamiquement le style.
Rien ne se passe, voici ce que j'ai mis :
Code du button pour retirer le like :
<button type="submit" name="deletelike" style="font-size:250%;color:#E53935;outline: 0;background: none;border: 0;" class="pull-right text-muted fa fa-heart"></button>Code js pour retirer le like :
$(function() {
$("#unlikeForm").submit(function(){
reponsesinu_id = $(this).find("input[name=reponsesinu_id]").val();
$.post("../php/unlikeactions.php", {reponsesinu_id: reponsesinu_id}, function(data) {
$('button[name="deletelike"]').css('color', '#FAFAFA');
})
return false;
});
});
Bonsoir.
Ton problème doit être dû au fait que tu ne définis pas une url à la fonction $.post de jQuery, il rencontre donc une erreur mais comme tu n'utilises rien pour le vois quand c'est le cas et que je suppose que tu ne vérifies pas dans la console de ton navigateur, tu ne peux donc pas voir que tu as cette erreur.
Ce que tu définis dans la fonction $.post, doit être une url et donc accessible via l'url du navigateur et sauf erreur de ma part, ça m'étonnerais que ../php/unlikeactions.php puisse fonctionner.
Si en faite, car le code js est dans un dossier appeler js.
Mais dans tout les cas la premier partie fonctionne, c´est juste quajd jessaie de changer l´icone que cela ne veut pas fonctionner
Si en faite, car le code js est dans un dossier appeler js.
Je ne te parle pas de ton fichier js, mais de ce que tu définis dans la fonction, soit $.post.
Est-ce que tu surveilles la console de ton navigateur au moins pour vérifier qu'il n'y a pas de problème ?
Nan je surveille pas est ce important ?
Oui, ça te permet de voir si tu as des erreurs, si c'est le cas, de voir lesquelles afin de pouvoir les corriger.
Dans le cas où même si en voyant l'erreur tu ne l'as comprend pas ou que tu n'arrives pas à la corriger, elle nous permettra de pouvoir mieux t'aider pour résoudre ton problème si tu nous la transmet.
Il n´y a pas d´erreur dans la console
Quand je parle de la console, je veux parler des outils de développement du navigateur en général.
Dans ton cas par exemple, vu que tu fais une requête ajax, verifies surtout dAns l'onglet Réseau/Network qui permet d'analyser les requêtes HTTP faites sur le serveur.
Si ça se trouve tu as un problème à ce niveau là, ce qui empèche la suite de ton script de s'effectuer.
Même si dans la communication javascript (client) » php (serveur) il n'y a pas de problème, ce qui fait que ton script php se déroulera bien, mais si ton script php renvoit une erreur quelconque à ton javascript, tu ne pourras pas le savoir/voir sans en vérifier le retour.
Il te faut regarder du côté des requêtes XHR, il est donc préférable de filtrer en cliquant sur l'onglet XHR pour surveiller les requêtes effectuées en ajax.
mon formunlike.js je le trouve pas dans XHR mais dans JS
EDIT :
En cliquand sur le bouton pour disliker voila ce que sa donner dans l'onglet XHR :
http://img15.hostingpics.net/pics/990780Sanstitre1.jpg
mon formunlike.js je le trouve pas dans XHR mais dans JS
Mais le problème n'est pas le chargement de ton fichier javascript, ce qui nous importe, c'est la communication entre ton script javascript et ton script PHP, que ce soit dans un sens ou dans l'autre.
En cliquand sur le bouton pour disliker voila ce que sa donner dans l'onglet XHR :
http://img15.hostingpics.net/pics/990780Sanstitre1.jpg