表不更新值，您交互的 JS 越多

Question

我已经用html设置了一个表，并用php填充了这些值。

这个想法是让用户能够使用状态和消息更新订单状态。

它第一次工作正常，但你使用它的次数越多，它会更新另一行或根本不更新。

不确定这是否是缓存问题。

请帮忙！

这是我所拥有的：

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

和 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

您使用锚标记作为带有空href的按钮，这实质上是重新加载页面。有时，重新加载可能会在进行 AJAX 调用之前发生。

将事件对象作为参数添加到 onClick 函数，并使用preventDefault防止浏览器访问href链接。

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

我希望这可以解决您的问题。