表中没有更新值，您与JS交互的次数越多

Question

I have set up a table with html and populate the values with php.

The idea is to have the user able to update order statuses with a status and a message.

It works fine for first time, but the more you use it, it updates another row or not at all.

Not sure if it is an caching issue.

Please help!

Here is what I have:

                <?php $query = "SELECT user_orders.quote_id,user_orders.date_converted,user_orders.estimated_time_of_arrival,user_orders.order_balance,user_orders.status, user_orders.factory_message,
              users.user_id, users.user_firstname, users.user_lastname                 
             FROM user_orders
             INNER JOIN users ON user_orders.user_id=users.user_id WHERE user_orders.status != 0 ORDER BY date_converted DESC";

                $select_users = mysqli_query($connection, $query);
                while ($row = mysqli_fetch_assoc($select_users)) {
                    $quote_id = $row['quote_id'];
                    $date_converted = $row['date_converted'];
                    $estimated_time_of_arrival = $row['estimated_time_of_arrival'];
                    $user_id = $row['user_id'];
                    $user_firstname = $row['user_firstname'];
                    $user_lastname = $row['user_lastname'];
                    $total = $row['order_balance'];
                    $factory_message = $row['factory_message'];
                    $status = $row['status'];

                    ?>
                    <tr>


                        <td><?php echo $quote_id ?></td>
                        <td><?php echo $date_converted ?></td>
                        <td><?php echo $estimated_time_of_arrival ?></td>
                        <td><?php echo $user_firstname . " " . $user_lastname ?></td>
                        <td><?php echo $total ?></td>

                        <td><a href="/app/order_pdf.php?quote_id=<?php echo $quote_id ?>" target="_blank">View</a
                        </td>


                        <!--Current Status-->
                        <?php
                        if ($status === '2') {
                            echo "<td><span class=\"badge badge-success\">Approved</span></td>";
                        } elseif ($status === '3') {
                            echo "<td><span class=\"badge badge-danger\">Declined</span></td>";
                        } else {
                            echo "<td><span class=\"badge badge-warning\">Pending</span></td>";
                        }
                        ?>

                        <!--Change status-->
                        <td><select class="status" name="status">

                                <?
                                if ($status === "2") {

                                    ?>
                                    <option disabled>Please Select</option>
                                    <option value="1">Pending</option>
                                    <option value="2" selected>Accepted</option>
                                    <option value="3">Declined</option>

                                    <?

                                } elseif ($status === "3") {
                                    ?>

                                    <option disabled>Please Select</option>
                                    <option value="1">Pending</option>
                                    <option value="2">Accepted</option>
                                    <option value="3" selected>Declined</option>

                                    <?
                                } else {
                                    ?>
                                    <option disabled>Please Select</option>
                                    <option value="1" selected>Pending</option>
                                    <option value="2">Accepted</option>
                                    <option value="3">Declined</option>
                                    <?
                                }
                                ?>

                            </select></td>

                        <td><input class="message" name="message" style="width:100%;"
                                   value="<?php echo $factory_message ?>"></td>

                        <td style="text-align: left"><a href="" class="factoryUpdate">Update</a>
                        </td>

                    </tr>
                    <?php
                } ?>

                </tbody>

And the Js.

$(document).ready(function () {

    $(".factoryUpdate").click(function () {

        var quote_id = $(".quoteid", $(this).parent().parent()).val();
        var message = $(".message", $(this).parent().parent()).val();
        var status = $(".status", $(this).parent().parent()).val();

        var update = $(".update", $(this).parent().parent());

        $.ajax({

            url: "#",
            method: "POST",
            data: {

                "quoteid": quote_id,
                "message": message,
                "status": status
            },
            cache: false,
            success: function () {
                location.reload();
            }
        });


    });
});

Answer 1

You are using anchor tag as a button with an empty href, which essentially reloads the page. Sometimes, the reload might happen before the AJAX call gets made.

Add an event object as argument to your onClick function and use preventDefault to prevent the browser from following the href link.

$(document).ready(function () {
    $(".factoryUpdate").click(function (e) {
        e.preventDefault();

        var quote_id = $(".quoteid", $(this).parent().parent()).val();
        var message = $(".message", $(this).parent().parent()).val();
        var status = $(".status", $(this).parent().parent()).val();

        var update = $(".update", $(this).parent().parent());

        $.ajax({

            url: "#",
            method: "POST",
            data: {

                "quoteid": quote_id,
                "message": message,
                "status": status
            },
            cache: false,
            success: function () {
                location.reload();
            }
        });
    });
});

I hope this resolves your issue.