Aller au contenu

Bug de mon script ajax...juste la réponse est renvoyée

joboy84

Par joboy84
dans AjaX et JavaScript

 Partager

Sujets conseillés

joboy84

joboy84

Posté
Posté

Hello :)

J'ai un problème avec mon script de notation étoilé que j'essaye de faire.

Au lieu de parler en long et en large, je pense que les codes seront plus parlant :

javascript:


<script type="text/javascript">
<!-- 
function request(callback) {
	var xhr = getXMLHttpRequest();

	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
		        callback(xhr.responseText);
			document.getElementById("test").style.display = "none";				
		} else if (xhr.readyState < 4) {
			document.getElementById("test").style.display = "inline";
		}
	};
	//ICI si y a un guillemet ou autre, un slash s ajoute.
	var id = encodeURIComponent(document.getElementById("id").value);
	var note = encodeURIComponent(document.getElementById("note").value);

    xhr.open("GET", "script_vote.php?id=" + id + "&note= " + note, true);
    xhr.send(null);
}

function readData(sData) {
	//alert(sData);
	document.getElementById('reponseAjax').innerHTML = (sData);  
}

request(readData);
</script>

Partie de code php:


<?php
if(isset($_GET['id']) and isset($_GET['note']))
{ 
	//$id est le nom du site de jeux/nom unique identifiant le vote
	$id = ucfirst(trim(htmlspecialchars(addslashes(mysql_real_escape_string($_GET['id'])))));
	$note = trim(intval($_GET['note']));

	if($note <= 5 && $note >= 1)
	{
	//On verifie si le membre a deja vote	
	$verifVote = mysql_query('SELECT id FROM Votes WHERE Pseudo = "'.$_SESSION['pseudo'].'" AND id_du_vote = "'.$id.'"');

     if(mysql_num_rows($verifVote) > 0)
     {
     //on calcule la moyenne 

//On revoie a ajax que le membre a deja vote
echo '<ul class="vote2" id="ul_notation">
  <li class="note-actu" style="width:'.$pourcent.';" id="note"></li>
  <li><a onclick="return false;" href="#" title="1 sur 5" class="un" ></a></li>
  <li><a onclick="return false;" href="#" title="2 sur 5" class="deux" ></a></li>  
  <li><a onclick="return false;" href="#" title="3 sur 5" class="trois" ></a></li>
  <li><a onclick="return false;" href="#" title="4 sur 5" class="quatre" ></a></li> 
  <li><a onclick="return false;" href="#" title="5 sur 5" class="cinq" ></a></li>
</ul>';							
} 
}
}
?>

le code html


<body>
<div id="test" class="test" style="display: none;"><p style="margin-top:10px; margin-bottom:5px;">Chargement en cours...</p><img src="/ajax-loader.gif" alt="Chargement en cours..." /></div>
<?php
echo'
<ul class="vote" id="ul_notation">
  <li class="note-actu" style="width:0%;" id="note"></li>
  <li><a onclick="request(readData); return false;" href="script_vote.php?id=mince&note=1" title="1 sur 5" class="un" ></a></li>
  <li><a onclick="request(readData); return false;" href="script_vote.php?id=mince&note=2" title="2 sur 5" class="deux" ></a></li>  
  <li><a onclick="request(readData); return false;" href="script_vote.php?id=mince&note=3" title="3 sur 5" class="trois" ></a></li>
  <li><a onclick="request(readData); return false;" href="script_vote.php?id=mince&note=4" title="4 sur 5" class="quatre" ></a></li> 
  <li><a onclick="request(readData); return false;" href="script_vote.php?id=mince&note=5" title="5 sur 5" class="cinq" ></a></li>
</ul>';

	?>
    <div id="reponseAjax"></div>
</body>
</html>

Lien test: http://www.voilou.fr/test2.php

Ainsi cela fonctionne, le vote est soumis, les données mis à jour dans la base...

Le probleme c'est que cela retourne uniquement les données du code php et le reste de la page est supprimé..

En gros, au lieu de retourner la page html ci dessus, cela retourne juste 


<ul class="vote2" id="ul_notation">
  <li class="note-actu" style="width:'.$pourcent.';" id="note"></li>
  <li><a onclick="return false;" href="#" title="1 sur 5" class="un" ></a></li>
  <li><a onclick="return false;" href="#" title="2 sur 5" class="deux" ></a></li>  
  <li><a onclick="return false;" href="#" title="3 sur 5" class="trois" ></a></li>
  <li><a onclick="return false;" href="#" title="4 sur 5" class="quatre" ></a></li> 
  <li><a onclick="return false;" href="#" title="5 sur 5" class="cinq" ></a></li>
</ul>

Comment cela se fait il? Car normalement il devrait que inserer ces donnees dans le div reponseAjax non?

MErci

Lien vers le commentaire
Partager sur d’autres sites
joboy84

joboy84

Posté
  • Auteur
Posté

Ta page de test ne fonctionne pas ...

Sinon, je ne saurais que te conseiller d'utiliser une bibliothèque de fonctions comme Jquery et consorts, ça te simplifiera beaucoup de code.

Ben si elle fonctionne, en haut à gauche tu as les étoiles, en passant le curseur dessus elles s'animent...et en cliquant ca execute le script

Oui j'ai pensé à Jquery mais je voulais apprendre par moi meme :(

Lien vers le commentaire
Partager sur d’autres sites
SStephane

SStephane

Posté
Posté

Ton script serveur fonctionne certainement, pas l'appel ajax, à partir du moment ou je change de page quand je clic sur un élément qui doit faire un appel ajax, je me dis qu'il doit y avoir un problème.

Ligne 22 :

document.getElementById("id").value

document.getElementById("id") is null dans le débuggueur.

Si ton script serveur est appelé, c'est uniquement parce que l'url est suivie dans le navigateur puisque le "return false;" n'a jamais lieu après cette erreur.

Lien vers le commentaire
Partager sur d’autres sites
captain_torche

captain_torche

Posté
Posté

Personnellement, la seule chose que j'y vois, c'est un code incomplet : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [/size]
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Document sans nom</title> 
<link href="systeme_vote.css" rel="stylesheet" type="text/css" media="all" /> 
<script type="text/javascript" src="oXHR.js"></script> 
<script type="text/javascript">

Tu pars d'une bonne volonté, mais une fois que tu te seras un peu aguerri, je te conseille de te plonger dedans. Tu verras, d'un seul coup c'est beaucoup plus facile !

Par contre, si tu veux apprendre "proprement", je ne saurais que te conseiller de bannir innerHTML de tes développements : il n'ajoute pas les données dans le DOM, et ces dernières ne sont donc pas réutilisables en Javascript après coup.

Pour faire un code propre à la main, tu devras probablement générer un fichier XML plutôt qu'une liste HTML. Tu devras parcourir le XML, et ajouter des noeuds dans le document HTML : http://fr.selfhtml.o...objets/node.htm.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...