Ajax响应只工作一次-使用PHP的购物车
Ajax Response working only one time - Shopping cart using PHP
我正在购物车上工作。我正在将产品添加到购物车第一。然后使用Ajax更改项目Quantity On Change。这个过程在First Change上非常有效。但当我再次更改数量时,该部分没有刷新。
这里是显示购物车详细信息的编码
<?php
$session_id = $_SESSION["session_id"];
$query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price from cart as c inner join category as p on c.category_id = p.category_id where c.session_id = '$session_id'";
$select_cart = mysqli_query($mysqli, $query);
if (mysqli_num_rows($select_cart) > 0)
{
?>
<table>
<tr>
<th>Item</th><th>Item Detail</th><th>Quantity</th><th>Price</th><th>Sub Total</th>
</tr>
<?php
while ($result_cart = mysqli_fetch_object($select_cart))
{
?>
<tr id="cart<?php echo $result_cart->cart_id; ?>">
<td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td>
<td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td>
<td width="50" align="center">
<select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" >
<?php
for ($i = 1; $i <= 10; $i++)
{
?>
<option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option>
<?php
}
?>
</select>
</td>
<td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td>
<td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?>
<a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td>
</tr>
<?php
}
?>
</table>
<?php
}
else
{
?>
<p>Cart is Empty..!</p>
<?php
}
?>
这是在同一页面上使用的Ajax脚本
<script type="text/javascript">
$('.quantity').change( function()
{
var ID = $(this).attr("id");
var sid=ID.split("quantity");
var New_ID=sid[1];
var QTY = document.getElementById(ID).value;
var URL='updatecart.php';
var dataString = 'id=' + New_ID +'&qty='+ QTY;
$.ajax({
type: "GET",
url: URL,
data: dataString,
cache: false,
success: function(data){
$('#cart'+New_ID).html(data);
alert (data);
}
});
});
</script>
这是我将数据更新到数据库中的代码-updatecart.php.
<?php
include('admin/includes/config.php');
if(isset($_GET['id'])) {
$cart_id = ($_GET['id']);
$item_quantity = ($_GET['qty']);
mysqli_query($mysqli, "update cart set item_quantity = '$item_quantity' where cart_id = '$cart_id'");
// Loop through the products and output HTML for JavaScript to use
?>
<?php
$query = "select c.cart_id, c.item_quantity, p.category_name, p.product_thumb, p.reduced_price from cart as c inner join category as p on c.category_id = p.category_id where c.cart_id = '$cart_id'";
$select_cart = mysqli_query($mysqli, $query);
$result_cart = mysqli_fetch_object($select_cart);
?>
<td width="100" align="center"><img src="images/products/<?php echo $result_cart->product_thumb; ?>" width="50" /></td>
<td><?php echo $result_cart->category_name; ?><br /><?php echo $result_cart->product_name; ?></td>
<td width="50" align="center">
<select class="quantity" id="quantity<?php echo $result_cart->cart_id; ?>" >
<?php
for ($i = 1; $i <= 10; $i++)
{
?>
<option value="<?php echo $i; ?>" <?php if ($result_cart->item_quantity == $i) { echo "selected"; } ?>><?php echo $i; ?></option>
<?php
}
?>
</select>
</td>
<td width="75" align="center">$<?php echo $result_cart->reduced_price; ?></td>
<td width="100" align="center">$<?php echo $result_cart->item_quantity * $result_cart->reduced_price; ?>
<a title="Delete" href="delete-cart.php?id=<?php echo $result_cart->cart_id; ?>" class="delete"></a></td>
<?php
}
?>
我需要在更改特定项目的数量时自动计算购物车的小计价格和总价。我是Ajax的新手。
这些都是类似的问题。
1.Ajax表单只能工作一次
2.Ajax请求只工作一次-代码Ignitor
在参考了这些问题之后,我试着使用类似于$('.quantity').on( "change", "select", function() {
但没有得到结果的东西。
请帮帮我。我需要改变整个编码结构吗。
您在ajax成功后更改DOM(使用html()方法)。元素将被替换为新元素,因此您的事件将被删除。
此外,您的另一个修复仅对同样已删除的数量元素应用更改。试试之类的东西
$(document).on( "change", ".quantity", function() {}
我发现了两个问题:
1.始终围绕DOM
相关事件使用jQuery
的文档就绪功能:
$( document ).ready(function() {
//DOM EVENTS
});
2.您的活动不适用于实时生成的DOM
元素:
$( '.quantity' ).change( function(){} );
将其更改为:
$( document ).on('change', '.quantity', function(){} );
这还将为DOM
元素添加事件侦听器,该元素具有类"quantity",该类是在首次加载文档后生成的。
这不是最好的解决方案,但至少可以作为一种变通方法。您可以在代码中执行以下操作:
<script type="text/javascript">
$('.quantity').change(selectChange);
function selectChange()
{
var ID = $(this).attr("id");
var sid=ID.split("quantity");
var New_ID=sid[1];
var QTY = document.getElementById(ID).value;
var URL='updatecart.php';
var dataString = 'id=' + New_ID +'&qty='+ QTY;
$.ajax({
type: "GET",
url: URL,
data: dataString,
cache: false,
success: function(data){
$('#cart'+New_ID).html(data);
$('.quantity').change(selectChange);
alert (data);
}
});
}
</script>
我假设您的"select"被删除并重新附加在ajax调用成功回调上,因此,事件不会被绑定多次。
相关文章:
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- 有没有一个抽象层,这样我就可以集成一次,然后使用pusher、pubnub或faye
- 我可以使用JS一次使用JSON数组中的一个字符串吗
- 为什么我的代码可以在chrome上工作,而不是一次使用cordova编译
- 有没有办法让我的.js文件自毁,或重命名自己,或者在一次使用后将自己移动到新位置
- 如果 else 条件在下一次使用 setInterval 传递后发生
- 如何在angular js中一次使用多个过滤器
- 一次使用后销毁JS函数调用
- 一次使用多个相同形式的按钮
- 在一次使用后删除Javascript模块中的公共方法
- Ajax响应只工作一次-使用PHP的购物车
- <a>使用javascript:void(0)href一次使用后不调用ajax查询
- 第一次函数是return Undefined,每隔一次它就工作一次?使用Jquery、Javascript、Ajax
- 覆盖只显示一次使用cookie
- 如何一次使用change()和keydown()
- 选择一次使用后禁用的下拉菜单
- 如何加载一个DIV只有一次使用cookie jquery
- 角作用域问题->一次使用后功能就脱离了作用范围
- 如何在我的CSV文件中添加头只有一次使用javascript
- 如何定义本地变量一次使用HTML画布与javascript同时使用setInterval循环