[英]Ajax Increasing Quantity on Cart only Work Once
在進入結帳確認頁面之前,我有一個頁面可以增加和減少購物車上的產品數量。 實際上我是用ajax做的,然后后端將根據我點擊的按鈕(它有product_id)執行操作數量的產品。
問題是,第一次 ajax 運行良好,然后我刷新了表格(不是整個頁面)。 但是,當我再次單擊按鈕時。 它什么都不返回。 但是,在我使用 F5 刷新頁面然后再次單擊該按鈕后,數量會更新。
你能告訴我解決這個問題的正確方法嗎? (PS:對不起我的英語)
阿賈克斯調用:
$(document).ready(function () {
//Increase quantity on cart
$(".btnPlus").on('click', function () {
var id = $(this).val();
var url = "CRUD member/update-checkout-plus.php";
var postdata = {"id": id};
$.post(url, postdata, function (html) {
$("#myCart").load(location.href + " #myCart");
});
});
這是按鈕,我只為加號按鈕工作,減號按鈕我還沒有這樣做。
echo '<td style="text-align: center">'
. '<button class="btnPlus" value="' . $item['id'] . '"><span class="glyphicon glyphicon-plus"></span></button>'
. '<input type="text" class="fieldQty" value="' . $item['qty'] . '" style="text-align: center" size="2" readonly/>'
. '<button class="btnMinus" value="' . $item['id'] . '"><span class="glyphicon glyphicon-minus"></span></button>'
. '</td>';
后端(update-checkout-plus.php):
include '../../config.php';
$id = $_POST['id'];
$query = mysql_query("SELECT stock FROM products WHERE product_id = '$id'");
$row = mysql_fetch_array($query);
$stock = $row['stock'];
//if the quantity has reached maximum of stock (DB)
//quantity == $stock
//else quantity++
if ($_SESSION['cart'][$id]['qty'] >= $stock) {
$_SESSION['cart'][$id]['qty'] = $stock;
} else {
$_SESSION['cart'][$id]['qty'] ++;
}
在我看來,你有一個類.btn
駐留在#mycart
div中,每次你.load()
你改變DOM,所以新的元素進入div,這導致舊的綁定從DOM中刪除。
因此,在這種情況下,您必須將事件委托給最近的靜態父/文檔/正文:
$(document).on('click', '.btnPlus', function () {
調用此函數,在其中追加.btnPlus
function bindAddToCart(){
$(document).on('click', '.btnPlus', function () {
//your click functionality
});
}
添加 location.reload() 看下面的代碼:
$('.cart_quantity_up').click(function(){
var id=$(this).attr("pid").toString();
var pls=this.parentNode.children[1]
console.log(pls)
console.log(id)
$.ajax({
type:"GET",
url:"/pluscart/",
data:{
prod_id:id
},
success:function(data){
pls.innerText=data.quantity
location.reload()
}
})
});
轉到YourTheme / templates / checkout / cart.phtml並粘貼以下代碼:
<script type="text/javascript">
function changeItemQuantity( qty,num,cartid) {
var num = num;
var cartid = cartid;
var quantity = document.getElementById(cartid).value
/* Restrict Quantity as a Non Negative */
quantity = Math.max(1, quantity);
var currentVal = parseInt(quantity);
var final_val = currentVal + num;
document.getElementById(cartid).value=final_val;
}
</script>
轉到app / design / frontend / YourTheme / default / template / checkout / cart / item / default.phtml並在第207行粘貼此代碼:
<a class="mobile-only" onclick="changeItemQuantity(<?php echo $this->getQty() ?>,-1,<?php echo $_item->getId()?>); return false;" href="#"> - </a>
<label class="mobile-only m-text"><?php echo $this->__('QTY') ?></label>
<input name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $this->getQty() ?>" size="4" title="<?php echo $this->__('Qty') ?>" id="<?php echo $_item->getId()?>" class="input-text qty" maxlength="12" />
<a class="mobile-only" onclick="changeItemQuantity(<?php echo $this->getQty() ?>,1,<?php echo $_item->getId()?>); return false;" href="#"> + </a>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.