Actualisation partie d'une page sans refresh F5

**E. Nigma** · 10/05/2015, 14h37

Bonjour à tous,

Sur un système de like/unlike d'une galerie photo je bute sur le fait que lorsque je clique sur le lien "like" l'affichage de l'intitulé ne soit pas automatiquement actualisé en "unlike" sauf à faire refresh F5.

J'ai beau scruter mon fichier .js je ne vois pas ce qui cloche.
(le code de mes fichiers ci-dessous, j'ai volontairement déclaré ma variable user à 2 car je suis encore en phase de test)

Grand merci par avance pour votre aide.

gallery.php (la galerie photo)

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="conteneur">
<?php
require "connect.php";
$dir = 'uploadPics/';
$reponse = $bdd->query('SELECT id,nomPhoto,titre,description,likes FROM uploadphotos ORDER BY Id DESC');
while ($donnees = $reponse->fetch()){
	echo "<div class=\"cadrePhoto\">";
	echo $donnees['id'];
	echo "<br />";
	echo $donnees['titre'];
	echo "<br />";
	echo $donnees['description'];
	echo "<br />";
	echo "<img src='".$dir.$donnees['nomPhoto']."' />";
	echo "<br />";
	echo $donnees['nomPhoto'];
	echo "<br />";
	$uid=2;
	$sql=$bdd->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
	$sql->execute(array($donnees['id'], $uid));
	if($sql->rowCount()==1){
		echo "<a href=javascript:void(0) class=\"like\" id='".$donnees['id']."' title=\"Unlike\">Unlike</a>";
	}
	else{ 
		echo "<a href=javascript:void(0) class=\"like\" id='".$donnees['id']."' title=\"Like\">Like</a>";
	}
	echo "</div>";
}
$reponse->closeCursor();
?>
<script src="function.js"></script>
</div>
</body>
</html>

function.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
 $(document).on('click', '.like', function(){
  if($(this).attr('title')=='Like'){
   $.post('action.php',{pid:$(this).attr('id'),action:'like'},function(){
    $(this).text('Unlike');
    $(this).attr('title','Unlike');
   });
  }else{
   if($(this).attr('title')=='Unlike'){
    $.post('action.php',{pid:$(this).attr('id'),action:'unlike'},function(){
     $(this).text('Like');
     $(this).attr('title','Like');
    });
   }
  }
 });
});

action.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
include "connect.php";
$pid=$_POST['pid'];
$user=2;
$action=$_POST['action'];
if ($action=='like'){
 $sql=$bdd->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
 $sql->execute(array($pid,$user));
 $matches=$sql->rowCount();
 if($matches==0){
 $sql=$bdd->prepare("INSERT INTO fdlikes (pid, user) VALUES(?, ?)");
 $sql->execute(array($pid,$user));
 $sql=$bdd->prepare("UPDATE uploadphotos SET likes=likes+1 WHERE id=?");
 $sql->execute(array($pid));
 }else{
 die("Il n'existe pas de photo avec cet ID");
 }
}
if ($action=='unlike'){
 $sql=$bdd->prepare("SELECT * FROM fdlikes WHERE pid=? and user=?");
 $sql->execute(array($pid,$user));
 $matches=$sql->rowCount();
 if ($matches!=0){
 $sql=$bdd->prepare("DELETE FROM fdlikes WHERE pid=? AND user=?");
 $sql->execute(array($pid,$user));
 $sql=$bdd->prepare("UPDATE uploadphotos SET likes=likes-1 WHERE id=?");
 $sql->execute(array($pid));
 }
}
 
?>

**Golgotha** · 10/05/2015, 15h08

Bonjour,

Peux tu vérifier que ton callback est bien appelé ?

Si oui, ça viens peut être du this qui n'est pas celui que tu crois.
Et dans ce cas essaye comme ça :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 if($(this).attr('title')=='Like'){
  var $that = $(this);

   $.post('action.php',{pid:$(this).attr('id'),action:'like'},function(){
    $that.text('Unlike');
    $that.attr('title','Unlike');
   });
  }

**E. Nigma** · 10/05/2015, 18h50

Hello Golgotha,

Merci pour ta réponse.
Tu as vu juste, et le code que tu proposes fonctionnes nickel !! Un grand merci.

Pour tout te dire je suis une bille de chez bille en Ajax, je n'en ai jamais fait, je m'y mets juste car j'ai absolument besoin de la fonction like/unlike sur un projet web.
J'ai passé des heures et des heures à lire des posts sur le sujet, je vois maintenant à peu près l'idée mais dans le détail, au secours...

Tu m'enlèves une grosse épine du pied !

Est-ce que je peux encore abuser de ton aide ? J'ai remplacé les textes "Like" et "Unlike" par des images (les pouces FB pour faire original hein !!).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "<a href=javascript:void(0) class=\"like\" id='".$donnees['id']."' title=\"Like\"><img src=\"thumbUp.png\" /</a>";

Par quoi remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$that.text('Unlike');
$that.attr('title','Unlike');

dans mon fichier .js pour retrouver mes images de pouce après que le lien aura été cliqué une fois ?

Merci encore.

Bonne soirée,
E. Nigma

**Golgotha** · 10/05/2015, 21h26

Pas de problème.

Je pense qu'il suffirait de changer le src de l'image par l'autre image de cette façon :

$that.find('img').attr({'src' : 'thumbUp.png'});

**E. Nigma** · 10/05/2015, 23h42

Merci pour cette nouvelle réponse.

Alors c'est très bizarre : j'ai remplacé mon fichier .js de départ par celui-ci avec le code pour changer le src de l'image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
 $(document).on('click', '.like', function(){
  if($(this).attr('title')=='Like'){
	var $that = $(this);
 
   $.post('action.php',{pid:$(this).attr('id'),action:'like'},function(){
    $that.find('img').attr({'src' : 'thumbDown.png'});
   });
  }else{
   if($(this).attr('title')=='Unlike'){
	var $that = $(this);
 
    $.post('action.php',{pid:$(this).attr('id'),action:'unlike'},function(){
     $that.find('img').attr({'src' : 'thumbUp.png'});
    });
   }
  }
 });
});

et voilà ce qu'il se passe :
Lorsque je recharge ma page et que je clique une 1ère fois sur un pouce, l'actualisation de l'image se fait bien (pouce levé si clic sur pouce vers le bas et inversement), ainsi que la mise à jour de la BDD.
Mais si je reclic sur le même pouce, là il ne se passe plus rien, ni mise à jour en BDD, ni actualisation de l'image.