Décalage affichage div après actualisation via requête ajax

**E. Nigma** · 19/05/2015, 12h32

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 :
Nom : Capture12.JPG
Affichages : 258
Taille : 8,3 Ko

Nom : Capture12.JPG
Affichages : 258
Taille : 8,3 Ko

Cet espace n'existe pas au chargement de la page ou F5 :
Nom : Capture13.JPG
Affichages : 258
Taille : 8,4 Ko

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 !!

Ma galerie (gallery.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
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 :

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
$(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 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
<?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;
?>

**SpaceFrog** · 19/05/2015, 13h52

l'espace est dans data ...

**Bovino** · 20/05/2015, 10h18

Dans le code, il n'y a aucune parenthèses d'affichées à priori...

**E. Nigma** · 20/05/2015, 13h39

Haa merci la grenouille de l'espace.
Mais est-ce incontournable ou est-ce qu'il y a un moyen de supprimer cet espace ?
Si oui est-ce du côté de ce que j'echo dans le fichier action.php que je dois modifier un truc ?
Ou c'est le fait de récupérer mes données dans data qui m'ajoute cet espace ?
Parce que franchement je cherche des pistes dans les forums mais je trouve... rien

Hello Bovino œil de lynx

Bien vu j'ai copié une version du code où j'avais enlevé les parenthèses.
Donc ma span avec parenthèses c'est celle-ci :

Code :

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

(<span id='compteur".$donnees['id']."'>".$donnees['likes']."</span>)

**Bovino** · 20/05/2015, 13h55

L'ajout d'espaces n'est pas une fatalité, mais sa présence peut être due à beaucoup de choses.
Par exemple, regarde ce petit bout de HTML
http://jsfiddle.net/r59zher5/
la seule présence de sauts de lignes génère un espace.

Dans ton cas, ça ne semble pas être la bonne piste, mais il y en a d'autres, par exemple, la présence de sauts de lignes avant l'ouverture de la balise PHP :

Code php :

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

1
2
 
<?php

ici, la première ligne vide est en dehors du code PHP, il s'agit donc d'un saut de ligne à afficher.

Sinon, si tu préfères mettre la poussière sous le tapis plutôt que de corriger les erreurs, tu peux utiliser la fonction trim() :

Code php :

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

echo trim($resultat);

**SpaceFrog** · 20/05/2015, 15h07

il se peut que le BOM soit aussi générateur de caractères parasites

**E. Nigma** · 21/05/2015, 15h50

Bonjour Messieurs,

Merci pour vos réponses. Alors :

@Bovino
Intéressant le bout d'HTML avec sauts de ligne, je garde ça en mémoire.
Je n'avais aucune idée qu'une ligne vide avant balise d'ouverture php pouvait provoquer un espace... Je le garde en mémoire aussi.
Et la fonction trim() pour moi n'a donné aucun résultat (et quand bien même, moi mettre la poussière sous le tapis ça me crispe parce que j'aime bien comprendre)

@SpaceFrog
En revanche en effet j'ai ré-encodé mes pages en UTF8 sans BOM (on reboucle sur l'encodage hein Bovino ! Et du coup question: il vaut donc mieux encoder ses pages en UTF8 mais sans BOM alors ?), et là je n'ai plus ce problème d'espace, mais, fait pour le moins étrange, seulement si je vire les parenthèses, car si je les laisse, l'espace est toujours là...
Mais qu'est-ce qu'elles ont ces foutues parenthèses ???
(Ce qu'il y a de bien c'est que comme un nouveau problème surgit toujours, on n'a jamais le temps de s'ennuyer...)

Décalage affichage div après actualisation via requête ajax

jQuery

Discussions similaires

Partager

Partager