How to auto update cart when user delete an item? - php

Question

I make the cart with a separate page. When view cart button is clicked I load the php file of the cart. Where I loop the cart session variable array and show in the page. But, when the user press delete button of an item it should be deleted and not shown after in the cart page. Now, how can I automatically update the cart page without reloading the page?
I need some idea how can I implement this?
loop part
<?php foreach($_SESSION['cart'] as $result)
{
?>
delete button
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2">
<h6><strong><?php echo $result['price']; ?><span class="text-muted"> x</span></strong></h6>
</div>
<div class="col-sm-4">
<input type="text" class="form-control input-sm" value=<?php echo $result['quantity']; ?>>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-link btn-sm">
<span class="fa fa-trash"> </span>
</button>
</div>
</div>
</div>
full source code here
Edit 1
suppose I get the page by ajax call
$.ajax(
{
url: 'makeCartPage.php',
type: 'POST',
success: function(msg)
{
//here to code to show the new cart page/information
},
error: function()
{
console.log('cart error');
}
});
But, there was a challenge to show the ajax return data.

Answer 1

There are a couple ways to do this, but one way is to not refresh the list, but rather hide the item you delete, so add a class to the top-level row wrapper class like product-wrapper or what-have-you:
<div class="row product-wrapper">
When you click the x button, you run the ajax, update the session on the makeCartPage.php page, and on success you traverse the DOM using $(this) and hide the product-wrapper class. Something like:
$('.text-muted').on('click',function(){
// Isolate the clicked button
var deleteButton = $(this);
// Run ajax to remove the item out of the session
$.ajax({
url: 'makeCartPage.php',
type: 'POST',
data: {
"id": /* get your product id here however you are able so you can remove from the session */
},
success: function(response) {
// You want to send back a delete success response when you actually
// remove it from the session. If true, do something similar to this
deleteButton.parents('.product-wrapper').fadeOut('fast');
},
error: function(){
console.log('cart error');
}
});
});
This should be enough info to get you started. Here is a fiddle of the hiding fx:
https://jsfiddle.net/efL891mu/