0

I'm working on a Shopping cart. I'm adding product to cart First. Then using Ajax to Change the item Quantity On Change. This process works perfectly on First Change. But when I'm changing the quantity again the portion not refreshed.

Here is coding to display Cart Details 

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

And this is the Ajax script using on Same page

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

And Here is the code where I'm updating Data into database- 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
} 
?>

I need to automatically calculate the Subtotal Price and Total prices of cart on Changing the Quantity of particular items. I'm new to Ajax.

These are the similar Questions.

1. Ajax form only work one time

2. Ajax Request works only once - code Ignitor

After refering these questions I tried to use something like this $('.quantity').on( "change", "select", function() {But Not getting Result.

Please help me. Do I need to Change the whole coding Structure.

Community
  • 1
  • 1
Rakesh
  • 400
  • 2
  • 5
  • 19
  • 1
    I think you need to step down to a less complicated project to teach yourself AJAX. This one is probably not a good leap-off point. – DevlshOne Sep 07 '14 at 13:55

3 Answers3

1

You are changing the DOM after ajax success (using the html() method). The element is replaced with a new one, thus your events are removed.

Also, your other fix is only applying the change on quantity elements that also have been removed. Try something like

$(document).on( "change", ".quantity", function() {}
Design by Adrian
  • 2,185
  • 1
  • 20
  • 22
  • I tried this but not working.. – Rakesh Sep 08 '14 at 05:17
  • this is not the only fix you need to make. please check my first paragraph. – Design by Adrian Sep 08 '14 at 09:12
  • @Adrian What exactly I have to do After Ajax success. As I said I'm not comfortable with Ajax. I've referred lots of Ajax tutorials but still I'm not getting the issue resolved. – Rakesh Sep 08 '14 at 13:24
  • I don't know. What do you want to do? Do you want to clear the form? Do you want to update form contents with the results? This hasn't anything to do with AJAX anymore. In the success callback you continue modify your DOM however you like with the results given. Just don't use the html() function, as it destroys the contents and all its events. – Design by Adrian Sep 08 '14 at 15:24
1

i have found 2 issues:

1. always use jQuery's document-ready function around DOM related events: 

$( document ).ready(function() {
     //DOM EVENTS
});

2. your event doesn't work on live-generated DOM elements: 

$( '.quantity' ).change( function(){} );

change it to:

$( document ).on('change', '.quantity', function(){} );

this will also add event listeners to DOM elements with the class "quantity" that have been generated after the document loaded for the first time.

low_rents
  • 4,481
  • 3
  • 27
  • 55
0

This is not the best solution but, at least, it may work as a workaround. Your can do the following in your code:

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

I assume that your "select" is removed and re-appended on the ajax call success callback, so, the events won't be binded more than once.

Mindastic
  • 4,023
  • 3
  • 19
  • 20