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.

**Bovino** · 11/05/2015, 08h44

C'est parce que tu n'as pas lu la doc et donc que tu ne fais pas la distinction entre un attribut HTML et une propriété JavaScript.

**Golgotha** · 11/05/2015, 09h56

@Bovino

à mon (humble) avis, c'est juste que tu as oublié de remettre $that.attr('title','Unlike'); et $that.attr('title','Like');.

**E. Nigma** · 11/05/2015, 12h09

@Bovino

C'est parce que tu n'as pas lu la doc

> et pourtant, j'en ai lu des trucs !!!

tu ne fais pas la distinction entre un attribut HTML et une propriété JavaScript

> certainement... là aujourd'hui après le WE que je viens de passer je ne peux plus lire les mots "JQuery" ou "JavaScript" sans avoir une poussée d'urticaire

@Golgotha
A mon (humble) avis tu as raison : merci merci merci

Bonne journée à tous les 2

**E. Nigma** · 12/05/2015, 20h52

C'est encore moiiii !

@Golgotha : si tu as encore un peu de patience pour moi, je suis partie sur une (petite ?) modification du système de like.
(J'ai peur de Bovino, je suis sûre qu'il se cache quelque part sur le site et qu'il peut surgir à tout moment pour me dire que je n'ai pas lu la doc...)
Je rappelle que je n'y connais rien en js/ajax, que j'essaye de comprendre pour m'en sortir de ce f****** système de like, mais que franchement, j'ai du mal !!

Mais bref, j'en viens au fait : précédemment un utilisateur pouvait "liker" et "déliker" une photo, je souhaite maintenant qu'un utilisateur, une fois qu'il a "liké" (+1 en BDD sur l'id de la photo), ne puisse pas "déliker" (-1 en BDD sur l'id de la photo). Je souhaite également afficher un compteur du total de like par photo.

Pour résumer :
- le user n'a pas encore aimé une photo > Nom : pouceActif.JPG
Affichages : 1881
Taille : 8,1 Ko

Nom : pouceActif.JPG
Affichages : 1881
Taille : 8,1 Ko

- le user a aimé une photo > Nom : pouceInactif.JPG
Affichages : 1861
Taille : 8,0 Ko

- le user reclique sur le pouce ci-dessus > message "Vous avez déjà aimé cette photo"

Interrogations :

- Comment faire pour que le compteur s'actualise automatiquement au clic sur le 1er pouce (le bleu) ? > ça doit être une histoire de déclaration de variable mais je ne m'en sors pas
- Lors d'un clic sur un pouce gris (le 2e), le message "Vous avez déjà aimé cette photo" s'affiche bien, mais sur la dernière photo uploadée de la galerie, et pas du tout sous la photo concernée comme je le souhaite...

Sur l'ex ci-dessous j'ai cliqué sur le pouce gris de la photo 42 et c'est sous la photo 43 que vient s'afficher le message...

Nom : Capture.JPG
Affichages : 1856
Taille : 84,0 Ko

Nom : Capture.JPG
Affichages : 1856
Taille : 84,0 Ko

- J'ai un problème d'encodage puisque les caractères accentués du message d'alerte ne s'affichent pas correctement

Ci-dessous le nouveau code de mes pages :

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
42
<!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=1;
	$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\"><img class=\"imgLike\" src=\"thumbUpGrey.png\" /></a> (".$donnees['likes'].")";
	}
	else{ 
		echo "<a href=javascript:void(0) class=\"like\" id='".$donnees['id']."' title=\"Like\"><img class=\"imgLike\" src=\"thumbUpBlue.png\" /></a> (".$donnees['likes'].")";
	}
	echo "<div id=\"dejaAime\"></div>";	
	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
18
19
20
21
22
23
24
25
$(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' : 'thumbUpGrey.png'});
    $that.attr('title','Unlike');
   });
 
  }else{
   if($(this).attr('title')=='Unlike'){
	var $that = $(this);
 
    $.post('action.php',{pid:$(this).attr('id'),action:'unlike'},function(){
     $that.find('img').attr({'src' : 'thumbUpGrey.png'});
     $that.attr('title','Like');
 
    });
	$('#dejaAime').text("Vous avez déjà aimé cette photo");
   }
  }
 });
});

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
<?php
include "connect.php";
$pid=$_POST['pid'];
$user=1;
$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");
 }
}
?>

Merci, merci par avance (maintenant je vais faire 15mn de méditation, ça m'aidera sûrement à calmer mon cerveau)

**Bovino** · 13/05/2015, 08h02

Alors tout d'abord, quelques remarques générales.

• Il ne sert à rien de créer des attributs non valides. Pour stocker des données sur une balise, il existe une interface HTML5 prévue pour ça (

Comprendre les attributs personnalisés HTML5).
• Un id doit être unique dans la page, donc tes éléments dejaAime ne respectent pas cette contrainte et tu n'arriveras donc pas à t'en sortir sur cette base.
• Une balise <a> représente un lien, si tu ne veux pas que ça soit un lien, il ne faut pas utiliser href=javascript:void(0) mais une autre balise.

Ensuite

Comment faire pour que le compteur s'actualise automatiquement au clic sur le 1er pouce (le bleu) ? > ça doit être une histoire de déclaration de variable mais je ne m'en sors pas

mets l'information dans une balise spécifique dont tu actualisera le contenu au retour de ta requête AJAX.

Lors d'un clic sur un pouce gris (le 2e), le message "Vous avez déjà aimé cette photo" s'affiche bien, mais sur la dernière photo uploadée de la galerie, et pas du tout sous la photo concernée comme je le souhaite...

Voir ma remarque sur les id.

J'ai un problème d'encodage puisque les caractères accentués du message d'alerte ne s'affichent pas correctement

Tu n'as pas lu la doc (

) !

Passez à l'UTF-8 sans manquer une étape.

**E. Nigma** · 13/05/2015, 09h23

Merci Bovino pour cette réponse détaillée.
Je vais m'y remettre et essayer de m'en sortir avec ces indications que tu me donnes.
A plus tard donc

**Golgotha** · 13/05/2015, 14h20

Bovino il est gentil, faut juste bien lire la doc

Bon courage sinon

**E. Nigma** · 13/05/2015, 14h45

J'en peux plus de lire des docs que je ne comprends pas...

Donc ce que je vais faire c'est que je vais avancer sur mes autres pages pour le moment, et je reviendrai à tout ça fin de semaine + WE une fois que mon cerveau aura récupéré des neurones neufs.
A plus tard donc car je ne doute pas d'avoir à revenir vous embêter un peu

**E. Nigma** · 17/05/2015, 21h27

Bovino, Golgotha, hello !

Je suis de retour j'ai planché aujourd'hui sur mes 3 problèmes et j'en ai résolu 2, ça avance...

1. Problème d'encodage ok > merci Bovino pour la doc

2. Problème d'affichage de la mention "Vous avez déjà aimé cette photo" ok > merci Bovino again

> J'ai défini un Id unique pour la div contenant le message dans ma page gallery.php:

Code :

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

<div id='dejaAime".$donnees['id']."'></div>

> J'ai déclaré une variable pour l'Id de la photo dans le fichier .js:

Code :

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

var id_photo = $(this).attr('id');

> Puis j'affiche la mention sous chaque photo concernée via ce code dans le fichier .js:

Code :

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

$('#dejaAime'+id_photo+'').text("Vous avez déjà aimé cette photo");

3. Problème actualisation du compteur > pas ok...

J'ai essayé ça qui ne fonctionne pas évidemment:

Code :

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

$('#compteur'+id_photo+'').text($donnees['likes']);

Encore un p'tit coup de pouce Messieurs siouplé ? Là normalement à ce stade je devrais vous faire de la peine

Je suis sûre que c'est rien du tout mais je bbbbbbute !! (reconnaissez que je ne me décourage pas quand même...)

Merci (et bonne soirée bien sûr)

**E. Nigma** · 19/05/2015, 09h01

Helloooooo,

Ca y est j'ai enfin réglé mon problème de refresh du compteur, ouf...!!!

Maintenant j'ai un souci d' apparition d'un espace entre la parenthèse gauche de mon compteur et le nombre de likes lorsque ma span est actualisée via la requête Ajax (décalage qui n'existe pas au chargement de la page ou au F5), mais je ferme ce post-ci car il est résolu et j'en ouvre un autre pour ce décalage dans l'affichage.

Merci pour votre aide en tous cas et bonne journée.

Actualisation partie d'une page sans refresh F5

jQuery

Discussions similaires

Partager

Partager