I am making a restaurant website and i have displayed my products using an ajax call based on filter. When i added jquery at start, everything was working fine. Now, as i continued adding actions with each button, as soon as i click one of them, the page simply reloads and nothing happens. I have no idea what the issue is. I will post a lengthy part of the code for you so that you can follow
P.S: The code for add to cart is correct. It is after adding the other jquery functions, that it stopped working
<div id="message">
</div>
<div class="container" style="position:relative; top:200px; float:center">
<div class="collapse" id="filterdiv">
<form class="d-inline">
<select id="Category">
<option value='' selected>All</option>
<?php
$fCategory="SELECT DISTINCT Food_Type from food";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$res=$conn->query($fCategory);
if($res->rowCount()>0)
{
while($row=$res->fetch(PDO::FETCH_ASSOC))
{
echo "<option value=".$conn->quote($row['Food_Type']).">".$row['Food_Type']."
</option>";
}
}
?>
</select>
<select id="price">
<option value="">Price</option>
<option value="lowtohigh">Low to High</option>
<option value="hightolow">High to Low</option>
<
</select>
</form>
</div>
<div class="row" id="result">
</div>
</div>
<script type="text/javascript" src="Bootstrap4/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="Bootstrap4/js/bootstrap.min.js"></script>
<!--Ajax code to get food info-->
<script type="text/javascript">
$(document).ready(function()
{
$(".addItemBtn").click(function(e)
{
e.preventDefault();
var $form=$(this).closest(".form-submit");
var fid=$form.find(".fid").val();
var fname=$form.find(".fname").val();
var fimage=$form.find(".fimage").val();
var fprice=$form.find(".fprice").val();
$.ajax({
url: 'action.php',
method:'post',
data: {fid:fid,fname:fname,fimage:fimage,
fprice:fprice},
success:function(response)
{
$("#message").html(response);
window.scroll(0,0);
}
});
});
$("#search").keyup(function(){
let searchText=$(this).val();
if(searchText!=""){
$.ajax({
url:'action.php',
method:'post',
data:{query:searchText},
success:function(response){
$("#show-list").html(response);
}
});
}
else{
$("#show-list").html('');
}
});
$(document).on('click','#show-list a',function(){
$("#search").val($(this).text());
$("#show-list").html('');
});
$('body').click(function()
{
$('#show-list a').hide();
$('#show-list p').hide();
});
$(".reviews").click(function(){
alert("clicked");
});
$("#filterdiv").ready(function(){
let foodType=$("#Category").val();
let price=$("#price").val();
$.ajax({
url:'action.php',
method:'post',
data:{foodType:foodType,price:price},
success:function(response)
{
$("#result").html(response);
}
});
});
$("#Category").change(function(){
let foodType=$(this).val();
let price=$('#price').val();
$.ajax({
url:'action.php',
method:'post',
data:{foodType:foodType,price:price},
success:function(response)
{
$("#result").html(response);
}
});
});
$("#price").change(function(){
let price=$(this).val();
let foodType=$('#Category').val();
$.ajax({
url:'action.php',
method:'post',
data:{price:price,foodType:foodType},
success:function(response)
{
$("#result").html(response);
}
});
});
$("#searchData").click(function()
{
let searchValue=$('#search').val();
$.ajax({
url:'action.php',
method:'post',
data:{searchValue:searchValue},
success:function(response)
{
$("#result").html(response);
}
});
});
});
</script>
Now for action.php
if ((isset($_POST['fid'])) &&(!isset($_POST['qty'])))
{
alert('hello');
$fname=$_POST['fname'];
$fimage=$_POST['fimage'];
$fprice=$_POST['fprice'];
$fqty=1;
$cartQuery="SELECT * FROM cart WHERE Food_Name='$fname' AND cartNo='$cartNo'";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$res=$conn->query($cartQuery);
$numRes=$res->rowCount();
if($numRes)
{
echo '<div class="alert alert-danger alert-dismissible ">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><h3>Item already added to your cart</h3></strong>
</div>';
}
else
{
$insertQuery="INSERT INTO cart (cartNo,Food_Name,Food_Price,Food_Url,qty,Total_Price) VALUES
('$cartNo','$fname','$fprice','$fimage','$fqty','$fprice')";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$conn->exec($insertQuery);
echo '<div class="alert alert-success alert-dismissible mt-2">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong><h3>Item added to your cart</h3></strong>
</div>';
}
}
if (isset($_GET['remove']))
{
$deletedId=$_GET['remove'];
$deleteQuery="DELETE FROM cart WHERE id='$deletedId' AND cartNo='$cartNo'";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$row=$conn->exec($deleteQuery);
Header("Location:cart.php");
}
if (isset($_GET['clear']))
{
$clear="DELETE FROM cart WHERE cartNo='$cartNo'";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$conn->exec($clear);
Header("Location:cart.php");
}
if(isset($_POST['qty']))
{
$qty=$_POST['qty'];
$fid=$_POST['fid'];
$fprice=$_POST['fprice'];
$tprice=$qty*$fprice;
$updQty="UPDATE cart SET qty='$qty',TOTAL_PRICE='$tprice' WHERE id='$fid' AND
cartNo='$cartNo'";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$conn->exec($updQty);
Header("Location:cart.php");
}
if (isset($_POST['query']))
{
function test_input($data) {
$data = trim($data); //whitespacess
$data = stripslashes($data); //removes backslashes n clean data from database or form
$data = htmlspecialchars($data); //converts predefined characters to html entities, encoding user input so that they cannot manipulate html codes
return $data;
}
$inpText=$_POST['query'];
$searchData=test_input($inpText);
$searchData=preg_replace("#[^0-9a-z]#i","",$searchData);
$query= "SELECT Food_Name FROM food "
. "WHERE ( LOWER(Food_Name) LIKE LOWER('%$searchData%') "
. "OR LOWER(Food_Description) LIKE LOWER('%$searchData%') )";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$result=$conn->query($query);
if($result->rowCount()>0)
{
while($row=$result->fetch(PDO::FETCH_ASSOC))
{
echo "<a href='#' class='list-group-item list-group-item-action border-1'>".$row['Food_Name']."</a>";
}
}
else
{
echo "<p class='list-group-item border-1 text-danger'>No results found</p>";
}
}
if (isset($_POST['foodType']) || isset($_POST['price']))
{
$foodType=$price=$priceSort=$foodSort="";
if (isset($_POST['foodType']))
{
$foodType=$_POST['foodType'];
if ($foodType=='')
{
$foodSort='';
}
else
{
$foodSort="WHERE Food_Type=".$conn->quote($foodType);
}
}
if (isset($_POST['price']))
{
$price=$_POST['price'];
if ($price=="lowtohigh")
{
$priceSort="ORDER BY `Food_Price(Rs)` ASC";
}
else if ($price=='hightolow')
{
$priceSort="ORDER BY `Food_Price(Rs)` DESC";
}
else
{
$priceSort="";
}
}
$foodDisp="SELECT * FROM food ".$foodSort." ".$priceSort;
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$res=$conn->query($foodDisp);
while($row=$res->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-lg-3 mx-0">
<div class="card-deck" style="display:flex; flex:flex-wrap; padding:2px;">
<div class="card bg-transparent p-2 h-100 border-secondary mx-0 mb-2" style="min-
height:35rem;max-height:35rem;">
<img src="<?= 'foodImages/'.$row['Food_Url'] ?>" class="card-img-top img-fluid img-
responsive img-thumbnail" height="100" width="100%">
<div class="card-body p-1 text-center">
<h4 class="card-title text-center text-info"><?php echo $row['Food_Name']; ?>
</h4>
<h5 class="card-text text-center text-white"><?php echo $row['Food_Description'];
?>
</h5>
<h5 class="card-text text-center text-danger"><?php echo "Rs
".$row['Food_Price(Rs)']; ?>
</h5>
<button class="btn btn-success reviews">Reviews</button>
</div>
<div class="footer p-1">
<form action="" class="form-submit">
<input type="hidden" class="fid" value="<?php echo $row['Food_Id'] ;?>
">
<input type="hidden" class="fname" value="<?php echo $row['Food_Name'] ;?>
">
<input type="hidden" class="fprice" value="<?php echo $row['Food_Price(Rs)']
;?>
">
<input type="hidden" class="fimage" value="<?php echo $row['Food_Url'] ;?>
">
<input type="hidden" class="ftype" value="<?php echo $row['Food_Type'] ;?>
">
<button class="btn btn-info btn-block addItemBtn">Add to cart</button>
</form>
</div>
</div>
</div>
</div>
<?php }
}
?>
<?php
if (isset($_POST['searchValue']))
{
function test_input($data) {
$data = trim($data); //whitespacess
$data = stripslashes($data); //removes backslashes n clean data from database or form
$data = htmlspecialchars($data); //converts predefined characters to html entities, encoding user
input so that they cannot manipulate html codes
return $data;
}
$inpText=$_POST['searchValue'];
$searchData=test_input($inpText);
$starString= strtolower($searchData);
$searchData = $conn->quote($starString);
$searchDataStartMatch = $conn->quote("%".$starString);
$searchDataEndMatch = $conn->quote($starString."%");
$searchDataBothMatch = $conn->quote("%".$starString."%");
$sql="SELECT * FROM food WHERE LOWER(Food_Name) like {$searchDataBothMatch} OR
LOWER(Food_Description) LIKE {$searchDataBothMatch}
ORDER BY CASE WHEN LOWER(Food_Name)={$searchData} or LOWER(Food_Description)={$searchData}
THEN 0
WHEN LOWER(Food_Name) like {$searchDataEndMatch} or LOWER(Food_Description)
LIKE {$searchDataEndMatch} THEN 1
WHEN LOWER(Food_Name) like {$searchDataBothMatch} or LOWER(Food_Description)
LIKE {$searchDataBothMatch} THEN 2
WHEN LOWER(Food_Name) like {$searchDataStartMatch} or LOWER(Food_Description)
LIKE {$searchDataStartMatch} THEN 3
ELSE 4
END";
echo $sql;
$res=$conn->query($sql);
if ($res->rowCount()>0)
{
while($row=$res->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-lg-3 mx-0">
<div class="card-deck" style="display:flex; flex:flex-wrap; padding:2px;">
<div class="card bg-transparent p-2 h-100 border-secondary mx-0 mb-2" style="min-
height:35rem;max-height:35rem;">
<img src="<?= 'foodImages/'.$row['Food_Url'] ?>" class="card-img-top img-fluid img-
responsive img-thumbnail" height="100" width="100%">
<div class="card-body p-1 text-center">
<h4 class="card-title text-center text-info"><?php echo $row['Food_Name']; ?>
</h4>
<h5 class="card-text text-center text-white"><?php echo $row['Food_Description'];
?>
</h5>
<h5 class="card-text text-center text-danger"><?php echo "Rs
".$row['Food_Price(Rs)']; ?>
</h5>
<button class="btn btn-success reviews">Reviews</button>
</div>
<div class="footer p-1">
<form action="" class="form-submit">
<input type="hidden" class="fid" value="<?php echo $row['Food_Id'] ;?>
">
<input type="hidden" class="fname" value="<?php echo $row['Food_Name'] ;?>
">
<input type="hidden" class="fprice" value="<?php echo $row['Food_Price(Rs)'] ;?>
">
<input type="hidden" class="fimage" value="<?php echo $row['Food_Url'] ;?>
">
<input type="hidden" class="ftype" value="<?php echo $row['Food_Type'] ;?>
">
<button class="btn btn-info btn-block addItemBtn">Add to cart</button>
</form>
</div>
</div>
</div>
</div>
<?php }
}
else
{
echo "<p class='h4 text-white'>There are no matches! Search again </p>";
}
}
?>
