Salut à tous et merci de m'aider,
J'essaye de débuter avec Ajax. Dans cet exemple je cherche à faire un bête système de notation avec des étoiles, le truc classique on survole les étoiles grises jusqu'à la troisième on clique et la note est de 3. Je sais qu'il existe des codes sur le site pour ça mais je me suis donné cet exemple pour débuter.
voilà mon code mais il ne marche pas :
En fait c'est comme si il ne recevait pas mon POST. La requete MySQL est valide mais la table ne se met pas à jour. Bien sûr ici la requete est en dur mais ce sera la note cliquée qui sera insérée.
Code PHP :
<?php
function envoiReq ($requete){
// Exécution de la requête
$result = mysql_query($requete);
// Vérification du résultat
// Ceci montre la requête envoyée à MySQL ainsi que l'erreur. Utile pour déboguer.
if (!$result) {
$message = "YK_Requête invalide : " . mysql_error() . "</br></br>\n";
$message .= "YK_Requête complète : " . $requete;
echo ($message);
}
return $result;
}
// -------------------------------------------------------------------
// STAR
// -------------------------------------------------------------------
if(isset($_POST['do_submit'])) {
include "./connect_inc.php";
$query = "UPDATE notation SET note = '3' WHERE id = '1'";
$result = envoiReq($query);
if($_POST['byajax']) { die(); } else { $message = 'Sortation has been saved.'; }
}
?>
Ici tout à l'air de fonctionner, en tout cas il affiche bien 'Mise à jour effectuée.' et la valeur de la note est la bonne.
Une remarque j'utilise mootools.
Code Javascript :
window.addEvent('domready', function() {
// ajoute les fonctionnalités sur les etoiles
$$('.star').addEvent('click', function(){addNote(this)});
// note
var addNote = function(e){
var note=e.name;
$('auto_note').value = note;
//do an ajax request
//autosubmit if the checkbox says to
if($('auto_submit').value) {
var req = new Request({
url:'./index.php',
method:'post',
autoCancel:true,
data:'auto_note=' + note + '&ajax=' + $('auto_submit').value + '&do_submit=1&byajax=1',
onRequest: function() {
$('message-box').set('text','Mise à jour en cours.');
},
onSuccess: function() {
$('message-box').set('text','Mise à jour effectuée.');
}
}).send();
}
}
});
</script>Bon, ici pas de mystère.
Code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="./star.css" />
<script src="./mootools-1.2.4-core.js" type="text/javascript"></script>
<script src="./mootools-1.2.4.2-more.js" type="text/javascript"></script>
</head>
<body>
<form id="note-form" action="./index.php" method="post">
<input type="hidden" value="1" name="auto_submit" id="auto_submit" />
<input type="hidden" value="1" name="auto_note" id="auto_note" />
<ul id="notation" class='star-rating'>
<li><a href='#' id='one-star' class="star" name="1">1</a></li>
<li><a href='#' id='two-stars' class="star" name="2">2</a></li>
<li><a href='#' id='three-stars' class="star" name="3">3</a></li>
<li><a href='#' id='four-stars' class="star" name="4">4</a></li>
<li><a href='#' id='five-stars' class="star" name="5">5</a></li>
</ul>
</form>
<br/>
<div id="message-box"> </div>
</body>
</html>
Merci de votre aide.