2 pièce(s) jointe(s)
Décalage affichage div après actualisation via requête ajax
Bonjour à tous,
Sur une galerie photos j'ai un système de "like" avec affichage d'un compteur (nombre total de likes) à côté du lien à cliquer pour liker la photo (merci à Golgotha et Bovino pour leur aide précieuse sur la mise en place de ce système ;)).
La span contenant le compteur se met à jour à chaque clic 'j'aime" (en l'occurrence une img d'un pouce bleu pour faire original) via une requête Ajax.
Seulement voilà, lors de cette mise à jour via la requête Ajax, un espace est créé entre ma parenthèse gauche et mon chiffre :
Pièce jointe 178115
Cet espace n'existe pas au chargement de la page ou F5 :
Pièce jointe 178116
Quel est l'élément dans le process de mise à jour Ajax qui peut bien créer l'insertion de cet espace ?
Ce n'est pas un problème de format de ma donnée en bdd puisque le F5 ne m'affiche pas cet espace...
Quelqu'un a-t-il une idée ?
Merci par avance
PS: Bovino si tu lis ces lignes, je suis sûre qu'il n'y a pas de doc pour ça !! :mouarf:
Ma galerie (gallery.php)
Code:
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
43
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<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> <span id='compteur".$donnees['id']."'>".$donnees['likes']."</span>";
}
else{
echo "<a href=javascript:void(0) class=\"like\" id='".$donnees['id']."' title=\"Like\"><img class=\"imgLike\" src=\"thumbUpBlue.png\" /></a> <span id='compteur".$donnees['id']."'>".$donnees['likes']."</span>";
}
echo "<div class=\"allLike\" id='dejaAime".$donnees['id']."'></div>";
echo "</div>";
}
$reponse->closeCursor();
?>
<script src="function.js"></script>
</div>
</body>
</html> |
function.js
Code:
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
| $(document).ready(function(){
$(document).on('click', '.like', function(){
if($(this).attr('title')=='Like'){
var $that = $(this);
var id_photo = $(this).attr('id');
$.post('action.php',{pid:$(this).attr('id'),action:'like'},function(data){
$that.find('img').attr({'src' : 'thumbUpGrey.png'});
$that.attr('title','Unlike');
$('#compteur'+id_photo+'').text(data);
});
}else{
if($(this).attr('title')=='Unlike'){
var $that = $(this);
var id_photo = $(this).attr('id');
$.post('action.php',{pid:$(this).attr('id'),action:'unlike'},function(){
$that.find('img').attr({'src' : 'thumbUpGrey.png'});
$that.attr('title','Like');
$('#dejaAime'+id_photo+'').text("Vous avez déjà aimé cette photo");
});
}
}
});
}); |
action.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <?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));
}
}
$reponse = $bdd->query('SELECT likes FROM uploadphotos WHERE id="'.$pid.'"');
$donnees = $reponse->fetch();
$resultat = $donnees['likes'];
echo $resultat;
?> |
