Ajax Increasing Quantity on Cart only Work Once

Question

I have a page to increasing and decreasing quantity product on cart before going to checkout confirmation page. Actually im doing with ajax, and then the back end will execute manipulate quantity of product based on button i clicked (it has product_id).

The problem is, for the first time the ajax runs well and then i refresh the table (not whole page). But, when i click the button again. It returns nothing. BUT, after i refresh page using F5 and then click the button again, the quantity is updated.

Could you please show me the correct ways to solve this problem? (PS: Im sorry for my english)

Ajax call :

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

Here is the button, im only working for the button plus, the minus button i havent do that yet.

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>';

Backend (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'] ++;
}

Answer 1

What seems to me that you have a class .btn which resides in #mycart div, and every time you .load() you change the DOM so new elements gets in the div and that causes the old bindings gets removed from the DOM.

So in this case you have to delegate the event to the closest static parent / document / body:

$(document).on('click', '.btnPlus', function () {

Answer 2

Call this function,where you append .btnPlus

function bindAddToCart(){
        $(document).on('click', '.btnPlus', function () {
            //your click functionality
        });
    }

Answer 3

add location.reload() look at the code below:

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


    })
});

Answer 4

Go to YourTheme/templates/checkout/cart.phtml and paste the below code:

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

Go to app/design/frontend/YourTheme/default/template/checkout/cart/item/default.phtml and paste this code around line 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>