I have a page of a website which has bootstrap cards on. The cards are generated dynamically, but I wanted to add a filter section. I am trying to use AJAX to acheive this, I have got to a point where when you select a checkbox it triggers the loader gif but then that loader gif doesn't disapear. Through my hours of debugging I can see that its the page that the AJAX call is calling that is the problem, but I just can't see what the issue is and I am not getting errors or anything in the console. If anyone has any ideas I would really appreciate it, I have pasted my code below, also I am aware my sql queries are currently open to injection, just want to get it to work first.
<body>
<?php include("PHP/header.php"); ?>
<div class="container-fluid">
<div class="container" style="margin-top: 2%; text-align: center;">
<h1>Title goes here</h1>
Some tetx
<br/>
<br/>
<br/>
Filter Reviews:
<ul class="list-group">
<?php
$search = $conn->prepare("SELECT DISTINCT reviewcat FROM review_db ORDER BY reviewcat");
$search->execute();
while ($row = $search->fetch(PDO::FETCH_ASSOC)) {
?>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input product_check" value="<?=$row['reviewcat'];?>" id="reviewcat"> <?=$row['reviewcat']; ?>
</label>
</div>
</li>
<?php } ?>
</ul>
</div>
<br/><br/>
<div class="row-fluid ">
<h5 class="text-center" id="textChange"> All Products </h5>
<hr>
<div class="text-center">
<img src="Images/loader.gif" id="loader" width="100" style="display: none">
</div>
<div id="result" class="card-deck card_group_style pt-4" >
<?php
$res_data = $conn->prepare("SELECT * FROM review_db");
$res_data->execute();
?>
<?php while ($row = $res_data->fetch(PDO::FETCH_ASSOC)) {// Important line !!! Check summary get row on array .. ?>
<div class="col-sm-6 col-lg-3 py-2">
<div class="card mb-4">
<img class="card-img-top card-images " src="Images/Reviews/<?php echo $row['reviewimage1'];?>" alt="<?php echo $row['reviewtitle'];?>" >
<div class="card-body">
<h5 class="card-title"><?php echo $row['reviewtitle'];?></h5>
<p class="card-text"><?php echo $row['reviewsynop'];?></p>
<a href="Reviews/review-content.php?id=<?php echo $row['id'];?>&reviewtitle=<?php echo $row['reviewtitle'];?>" class="btn btn-primary my-4" >Read More</a>
<div class="card-footer" style="padding: 1%;">
<small class="text-muted">Submitted: <?php
$my_date = $row['reviewsub'];
$date = DATE("d/m/Y",strtotime($my_date));
echo $date;?></small>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<?php include("PHP/footer.php"); ?>
</div>
</body>
<?php include("PHP/js.php"); ?>
<script>
$(document).ready(function(){
$('#link-review,#link-footer-review').addClass('active');
});
</script>
<script type="text/javascript">
$(document).ready(function(){
function get_filter_text(text_id){
var filterData = [];
$('#'+text_id+':checked').each(function(){
filterData.push($(this).val());
});
return filterData;
}
$(".product_check").click(function(){
$("#loader").show();
var action = 'data';
var reviewcat = get_filter_text('reviewcat');
$.ajax({
method:'POST',
url:'reviewaction.php',
data:{action:action,reviewcat:reviewcat},
success:function(response){
$("#result").html(response);
$("#loader").hide();
$("#textChange").text("Filtered Reviews");
}
});
});
});
</script>
</html>
reviewaction.php
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
include_once $_SERVER['DOCUMENT_ROOT'] . '/Private/db.php';
// $stmt = $conn->prepare("SELECT * FROM blogdata ORDER BY blogsub DESC");
// $stmt->execute();
?>
<?php
if(isset($_POST['action'])){
$sql = "SELECT * FROM review_db WHERE reviewcat !=''";
$revsearch = $conn->prepare($sql);
$revsearch->execute();
$output='';
if($revsearch->num_rows>0){
while ($row = $revsearch->fetch(PDO::FETCH_ASSOC)) {
$output .= '
<div class="col-sm-6 col-lg-3 py-2">
<div class="card mb-4">
<img class="card-img-top card-images " src="Images/Reviews/'. echo $row['reviewimage1'];.'" alt="'. echo $row['reviewtitle'];.'" >
<div class="card-body">
<h5 class="card-title">'. echo $row['reviewtitle'];.'</h5>
<p class="card-text">'. echo $row['reviewsynop'];.'</p>
<a href="Reviews/review-content.php?id='. echo $row['id'];.'&reviewtitle='. echo $row['reviewtitle'];.'" class="btn btn-primary my-4" >Read More</a>
<div class="card-footer" style="padding: 1%;">
<small class="text-muted">Submitted: '.
$my_date = $row['reviewsub'];
$date = DATE("d/m/Y",strtotime($my_date));
echo $date;.'</small>
</div>
</div>
</div>
</div>
';
}
else{
$output = "<h3>No Reviews Found!</h3>";
}
echo $output;
}
?>
I have actually found something in the server error log, I was stupidly only use dev tools on firefox, but have found that in the reviewaction.php script I had left semicolons in and had also missed a closing bracket. There are still some other problems, which I can fix, just couldn't work out why it wasn't firing.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.