cart.php items.phpThe following code displays products in the cart of a user.using the submit buttons user can delete individual items in the cart.It is saved in cart.php file.This code works fine.
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div class="txt-heading">Shopping Cart</div>
<table cellpadding="10" cellspacing="1">
<tbody>
<tr>
<th><strong>Name</strong></th>
<th><strong>Quantity</strong></th>
<th><strong>Price</strong></th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$ip = $_SERVER['REMOTE_ADDR'];
$sql = "SELECT * FROM cart where ip='".$ip."'";
$result = mysqli_query($conn, $sql);
$item_total =0;
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
?><form method="post" action="" id="cart1">
<tr>
<td><strong><?php echo $row["name"]; ?></strong></td>
<td><?php echo $row["qty"]; ?></td>
<td align=right><?php echo "Rs.".$row["price"]; ?></td>
<input name="no" type="hidden" value="<?php echo $row["orderno"] ?>" />
<td><input type="submit" name="submit" id="submit"/></td>
</tr>
</form>
<?php
$item_total += ($row["price"]*$row["qty"]);
}
}
?>
<?php if ($_POST['submit']) {
$or=$_POST['no'];
$sql = "delete FROM cart where orderno='".$or."'";
$result = mysqli_query($conn, $sql);
header("Location: ".$_SERVER['PHP_SELF']);}
?>
<tr>
<td colspan="5" align=right><strong>Total:</strong> <?php echo "Rs.".$item_total; ?></td>
</tr>
</tbody>
</table>
</body>
</html>
The problem is that when i load this into a div of another page items.php using
<script>
$(document).ready(function(){
setInterval(function(){
$("#cart").load('cart.php')
}, 20);
});
</script>
The cart.php is properly loading in the div #cart, but when i click on submit nothing happens. Please note that on clicking submit in cart.php the product was deleted from the database.
Can anybody please explain how to fix this problem?
I presume the click handler is getting attached but the DOM(the submit button in your case) is not present , so you may need to delegate the click event like this
$('body').on('click','#submit',function(event){ // submit is id of submit button
// rest of the code
})
I finally solved this problem. Don't know if this is the "correct" way to do tis but it worked for me. I am posting the code here so that it may be of some use to others facing similar problem
in cart.php
<form method="post" action="cart.php" id="cart1">
<tr>
<td><strong><?php echo $row["name"]; ?></strong></td>
<td><?php echo $row["qty"]; ?></td>
<td align=right><?php echo "Rs.".$row["price"]; ?></td>
<td><input type="submit" name="<?php echo $row["orderno"] ?>" id="submit" value="Remove"/></td>
</tr>
</form>
The script was modified as
<script>
$(document).ready(function(){
setInterval(function(){
$("#cart").load('cart.php')
}, 200);
});
$('#cart').on('click','#submit',function(event){
var no = $(this).attr('name');
var b = parseInt(no);
$.ajax({
type: 'POST',
url: 'dlt.php',
data: {no: b},
});
});
</script>and dlt.php is
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
$or=$_POST['no'];
$sql = "delete FROM cart where orderno='".$or."'";
$result = mysqli_query($conn, $sql);
?></div>