$.post() en jQuery no funciona

Question

Estoy creando un sistema de clasificación y tengo el siguiente código jQuery en mi página 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>

Básicamente, hay un efecto de desplazamiento y luego, cuando haces clic en la estrella, enviará una solicitud de publicación a send.php, con la información sobre la calificación en la que se hizo clic y la identificación del elemento.Debajo de este script tengo algo de PHP que se ve así:

<?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   
}

?>

Y luego, por supuesto, tengo algo de CSS para que se vea bien.

El archivo send.php se ve así:

<?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());
    }

}




?>

Hay 3 columnas de calificación en la tabla de la base de datos;calificación_total:calificaciones totales (todas las calificaciones sumadas).clasificación:la calificación actual total_ratings:la cantidad de calificaciones.

El problema es que si cambio $_POST['rating'] y $_POST['rid'] a $_GET y coloco la información en la URL, por ejemplo, send.php?id=1&rating=4, funciona. y la base de datos se actualiza.Sin embargo, cuando presiono las estrellas, la base de datos no se actualiza.Después de jugar con el script, me di cuenta de que la publicación debe estar funcionando, sin embargo, la identificación regresa como 0.

Para probar esto más a fondo puse esto en la función de clic:

document.write(current_star+rid);

Para ver lo que se devolvió.El problema parece ser que el número que se devuelve se multiplica por la cantidad de veces que paso el cursor sobre los elementos.Entonces, si paso el cursor sobre quizás 6 de las estrellas, entonces la estrella_actual y la ID se repetirán 6 veces.

Siento que estoy muy cerca de hacer que esto funcione. ¿Alguien tiene alguna idea de qué pasa?Gracias de antemano.

Answer 1

Y lo importante que hay que tener en cuenta sobre el manejo de eventos de jQuery es que está basado en registro, lo que significa que jQuery le permite registrarse. múltiple devoluciones de llamada para cualquier evento en particular, y las invocará en el orden en que fueron vinculadas.

La razón por la que estás viendo repetida current_star y id Los valores se deben a que sigues vinculando más y más eventos en cada desplazamiento.Esto se debe a que tienes tu click() llama dentro de tu hover() llame, por lo tanto, cada vez que pase el cursor, vinculará otro evento click().

Intente vincular su click() evento fuera de su evento flotante, usando algo como esto:

$("[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});
});

Probablemente tampoco quieras vincular uno hover() llama dentro del otro, por la misma razón.

Answer 2

Noté que has usado $_POST['rid'] en lugar de $_POST['id']. Puede ser ese es tu problema.