$ .post () dans jQuery ne fonctionne pas

Question

Je crée un système d'évaluation et j'ai le code jQuery suivant sur ma page index.php:

<script type="text/javascript">

$(document).ready(function() {

    $("[id^=rating_]").hover(function() {

        var rid = $(this).attr("id").split("_")[1];
        $("#rating_"+rid).children("[class^=star_]").children('img').hover(function() {

            $("#rating_"+rid).children("[class^=star_]").children('img').removeClass("hover");

            /* The hovered item number */
            var hovered = $(this).parent().attr("class").split("_")[1];
            var hovered2 = $(this).parent().attr("class").split("_")[1];

            while(hovered > 0) {
                $("#rating_"+rid).children(".star_"+hovered).children('img').addClass("hover");
                hovered--;
            }

            $("#rating_"+rid).children("[class^=star_]").click(function() {
                var current_star = $(this).attr("class").split("_")[1];

                $.post("send.php", {rating: current_star, id: rid});
            });
        });

    });




});

</script>

En gros, il y a un effet de survol, puis lorsque vous cliquez sur l'étoile, il envoie une demande de publication à send.php, avec les informations sur la note cliquée et l'identifiant de l'élément. En dessous de ce script, j'ai un peu de PHP qui ressemble à ceci:

<?php


$query = mysql_query("SELECT * FROM test");

while($row = mysql_fetch_array($query)) {
    $rating = (int)$row[rating];
    ?>
    <div id="rating_<?php echo $row[id]; ?>">
    <span class="star_1"><img src="star_blank.png" alt="" <?php if($rating > 0) { echo"class='hover'"; } ?> /></span>
    <span class="star_2"><img src="star_blank.png" alt="" <?php if($rating > 1.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_3"><img src="star_blank.png" alt="" <?php if($rating > 2.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_4"><img src="star_blank.png" alt="" <?php if($rating > 3.5) { echo"class='hover'"; } ?> /></span>
    <span class="star_5"><img src="star_blank.png" alt="" <?php if($rating > 4.5) { echo"class='hover'"; } ?> /></span>
    <div class="clearleft">&nbsp;</div>
    </div>
    <br />
    <?php   
}

?>

Et bien sûr, j'ai un peu de CSS pour le rendre beau.

Le fichier send.php ressemble à ceci:

<?php

mysql_connect("localhost", "admin", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());


$rating = (int)$_POST['rating'];
$id = (int)$_POST['rid'];



$query = mysql_query("SELECT * FROM test WHERE id = '".$id."'") or die(mysql_error());

while($row = mysql_fetch_array($query)) {

    if($rating > 5 || $rating < 1) {
        echo"Rating can't be below 1 or more than 5";
    }
    else {

        $total_ratings = $row['total_ratings'];
        $total_rating = $row['total_rating'];
        $current_rating = $row['rating'];

        $new_total_rating = $total_rating + $rating;
        $new_total_ratings = $total_ratings + 1;
        $new_rating = $new_total_rating / $new_total_ratings;


        // Lets run the queries. 

        mysql_query("UPDATE test SET total_rating = '".$new_total_rating."' WHERE id = '".$id."'") or die(mysql_error());
        mysql_query("UPDATE test SET rating = '".$new_rating."' WHERE id = '".$id."'") or die(mysql_error());
        mysql_query("UPDATE test SET total_ratings = '".$new_total_ratings."' WHERE id = '".$id."'") or die(mysql_error());
    }

}




?>

Il y a 3 colonnes d'évaluation dans la table de base de données; total_rating: nombre total de notes (toutes les notes additionnées). note: la note actuelle total_ratings: le nombre de notes.

Le problème est que, si je change les variables $ _POST ['rating'] et $ _POST ['rid'] en $ _GET et que je mets les informations dans l'URL, par exemple, send.php? id = 1 & amp; rating = 4, cela fonctionne et la base de données est mise à jour. Cependant, lorsque j'appuie sur les étoiles, la base de données n'est pas mise à jour. Après avoir jeté un œil sur le script, je me suis rendu compte que le message devait fonctionner. Cependant, l'identifiant retourne à 0.

Pour tester cela davantage, je mets ceci dans la fonction de clic:

document.write(current_star+rid);

Pour voir ce qui a été retourné. Le problème semble être que le nombre renvoyé est multiplié par le nombre de fois que je survole des éléments. Donc, si je survole peut-être 6 des étoiles, alors le current_star et l'ID seront répétés 6 fois.

J'ai l'impression d'être sur le point de faire en sorte que cela fonctionne. Quelqu'un a-t-il une idée de ce qu'il se passe avec ça? Merci d'avance.

Answer 1

Il est important de comprendre que la gestion des événements de jQuery repose sur son registre, ce qui signifie que jQuery vous permet d'enregistrer plusieurs rappels pour un événement particulier. Il les invoque dans l'ordre indiqué. auxquels ils étaient liés.

Si vous voyez des valeurs répétées current_star et id, c'est parce que vous continuez de lier de plus en plus d'événements à chaque survol. Cela est dû au fait que votre click() appel figure dans votre hover() appel. Par conséquent, chaque fois que vous la survolez, vous liez un autre événement click ().

Essayez de lier votre <=> événement en dehors de votre événement de survol, en utilisant quelque chose comme ceci:

$("[id^=rating_]").children("[class^=star_]").click(function() {
        var rid = $(this).parent().attr("id").split("_")[1];
        var current_star = $(this).attr("class").split("_")[1];

        $.post("send.php", {rating: current_star, id: rid});
});

Vous ne voulez probablement pas non plus lier un <=> appel à l'intérieur de l'autre, pour la même raison.

Answer 2

J'ai remarqué que vous avez utilisé $_POST['rid'] au lieu de $_POST['id']. Peut-être que c'est votre problème.