$ .Post () em jQuery não funciona

Question

Eu estou fazendo um sistema de classificação, e eu tenho o seguinte código jQuery na minha 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>

Basicamente há um efeito hover e então quando você clicar na estrela, ele vai enviar um pedido de post para send.php, com a informação sobre a classificação clicado e o id do elemento. Abaixo este script eu tenho algum PHP que se parece com isso:

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

?>

E depois, claro, eu tenho alguns CSS para torná-la agradável.

Os olhares de arquivo send.php como este:

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

}




?>

Existem 3 colunas de classificação na tabela de banco de dados; total_rating: classificações totais (todas as avaliações de somados). classificação: a classificação de corrente TOTAL_RATINGS:. a quantidade de classificações

O problema é que, se eu mudar o $ _ POST [ 'rating'] e $ _ POST [ 'livrar'] a $ _GET e colocar o int informação que URL, por exemplo, send.php? Id = 1 & classificação = 4, ele funciona, eo banco de dados é atualizado. No entanto, quando eu pressionar as estrelas, o banco de dados não é atualizado. Depois de brincar com o roteiro, percebi que o cargo deve trabalhar, no entanto, os id retorna como 0.

Para testar isso mais eu colocar isso na função de clique:

document.write(current_star+rid);

Para ver o que foi devolvido. O problema parece ser que o número que é devolvido é multiplicado pela quantidade de vezes que eu passar o mouse sobre elementos. Então, se eu passar o mouse sobre talvez, 6 das estrelas, então o current_star e ID será repetido 6 vezes.

Eu sinto que estou tão perto de conseguir isso para o trabalho, alguém tem alguma idéia o que está acontecendo com ele? Agradecemos antecipadamente.

Answer 1

E coisa importante a perceber sobre manipulação de eventos do jQuery é que ele é baseado em registro, o que significa que jQuery permite registrar vários retornos de chamada para qualquer evento particular, e ele vai chamá-los na ordem em que foram obrigados.

A razão que você está vendo valores current_star e id repetidas é porque você manter a ligação mais e mais eventos em cada hover. Isto é porque tem a sua chamada click() dentro de sua chamada hover(), portanto, cada vez que você passar, você vai ligar um outro evento click ().

Tente vinculativo seu evento click() fora seu evento em foco, usando algo parecido com isto:

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

Você também provavelmente não deseja vincular uma chamada hover() dentro do outro, pelo mesmo motivo.

Answer 2

Eu notei que você usou $_POST['rid'] vez de $_POST['id']. Pode ser que é o seu problema.