2

I have page with multiple tables being generated by php/mysql. One of the elements is a in/out button. I have it ajax'ed so that the button changes to the on or off image with each click without reloading the page.

And it worked like charm! Until it didn't. If one table or a combination of tables exceeds so many rows...it stops working. But still works on the rows above it. Why would that be?

Here's the table generation...this occurs in multiple php files.

<tbody>
<?php while($row = MySQL_fetch_array($result)):
$id = htmlentities($row['id']);
$status = htmlentities($row['status']);
include ("button.php");
?>
<tr>
        <td title="lname" width="100px">
            <div style="width:100px; overflow:hidden;">
                <?php echo(htmlentities($row['last_name'])); ?>
            </div>
        </td>
        <td width="100px">
            <div style="width:100px; overflow:hidden;">
                <?php echo(htmlentities($row['first_name'])); ?>
            </div>
        </td>    
        .
        .
        .
        <td>
        <div style="width:100px; overflow:hidden;">
                <?php echo '<div><div id="r'.$id.'"><div id="test"><img class="rating" id="'.$status.$id.'" src="'.$color.'"><div style="display:none;">'.$status.'</div></div></div></div>';?>
        </div>
        </td>
</tr>
<?php endwhile; ?>

Here's the script:

<script>
        $(function(){
            $(document).on("click", ".rating", function(){
                var status = $(this).attr("id").substr(0,1);
                var id = $(this).attr("id").substr(1);
                var data = "id="+id+"&status="+status;

                $.ajax({
                    type: "POST",
                    url: "rate.php",
                    data: data,
                    success: function(e){
                    $("#r"+id).html(e);
                }

            })
        });
    });
    </script>

Here's the rate.php referenced in the code above:

<?php
include ("db.php");
$id = $_POST["id"];
$newstatus = $_POST["status"];

if($newstatus == 0){
    mysql_query("UPDATE users SET status = 1 WHERE id='$id'");
}
else {
    mysql_query("UPDATE users SET status = 0 WHERE id='$id'");
}
include("button.php"); //FILE WITH THE LIKE & DISLIKE BUTTONS AND THE NUMBER OF LIKES & DISLIKES

$list = '<div id="test"><img class="rating" id="'.$q[0].$id.'" src="'.$color.'"><div style="display:none;">'.$q[0].'</div>';

echo $list;
?>

And the button.php file referenced above:

<?php 

$q = mysql_query("SELECT status FROM users WHERE id='$id'");
$q = mysql_fetch_array($q);

if($q[0]){
    $color = "green.png";
}
else{
    $color = "red.png";
}
?>

So yeah...if the mysql query for one table is too large, after a certain number of rows, the in/out buttons stop working. Or if I have multiple smaller tables, once it exceeds a certain total number of rows, same thing.

Help?

4

1 回答 1

1

在评论中调试时，发现使用了重复的 id。ID在单个页面内必须是唯一的，否则可能会出现意想不到的结果（例如问题中描述的问题）。

要测试重复的 id，请使用属性等于选择器。

console.log($("[id=" + theidtotest + "]").length)

如果您从该行中获得超过 1 个元素，则说明您做错了。

于 2013-10-16T19:23:44.740 回答