How do I get items by category wise - php

Question

Basically, I have a list of categories that I am iterating form mysqli
<div style="width:20%; float:left;">
<h3>Categories</h3>
<?php while($categories = $resultproductcategories->fetch_assoc()){?>
<div class="rows">
<input type="button" name="<?php echo $categories['id'] ?>" value="<?php echo $categories['category?>" />;
</div>
<?php }?>
</div>
Now what I want that if I press any category it should fetch data accordingly there is my code for fetching
$stmtproducts = $mysqli->prepare("SELECT * FROM store_products sp INNER JOIN store_product_categories spc ON sp.product_category=spc.id WHERE sp.store_id=? AND sp.category=? LIMIT $count, 10");
$stmtproducts->bind_param("ii",$_SESSION['storeid'],$_POST['']);
$stmtproducts->execute();
$resultproducts = $stmtproducts->get_result();
$num=$resultproducts->num_rows;
echo $num;
$stmtproducts->close();
I am confused that if there was a specific name of input then I would have gotten it by isset($_POST['name']) but there is no specific name... I cannot think of how to send category to mysql.
<div id="divTransactional" style="width:70%;padding-left:5%; float:left;">
<?php if($num>0) {?>
<table class="table table-responsive table-hover" id="tableProducts">
<h3>Products</h3>
<tbody>
<?php for($i=0;$i<$num;$i++) { $products = $resultproducts->fetch_assoc();//while($products = $resultproducts->fetch_assoc()) {?>
<tr>
<td>Code: <?php echo $products['product_code'];?></td><td>Added On: <?php echo $products['product_date'];?></td>
</tr>
<tr>
<td>Name: <?php echo $products['product_name'];?></td>
</tr>
<tr>
<td>Category: <?php echo $products['category'];?></td>
</tr>
<tr>
<td>Description: <?php echo $products['product_desc'];?></td>
</tr>
<tr>
<td>Price: <?php echo $products['product_price'];?></td><td>Discount: <?php echo $products['product_discount'];?></td>
</tr>
<tr style="width:100px; height:100px;">
<td><img src="../../uploads/store/products/<?php echo $products['product_image1'];?>" style="width:100px; height:100px;"/></td>
<td><img src="../../uploads/store/products/<?php echo $products['product_image2'];?>" style="width:100px; height:100px;"/></td>
<td><img src="../../uploads/store/products/<?php echo $products['product_image3'];?>" style="width:100px; height:100px;"/></td>
<td><img src="../../uploads/store/products/<?php echo $products['product_image4'];?>" style="width:100px; height:100px;"/></td>
</tr>
<?php }?>
</tbody>
<?php if($num >= 10) { ?>
Next
<?php } ?>
<?php $prev = $count - 10;
if ($prev >= 0){?>
Previous
<?php }?>
</table>
<?php if($num >= 10) { ?>
Next
<?php } ?>
<?php $prev = $count - 10;
if ($prev >= 0){?>
Previous
<?php }?>
<?php } ?>
</div>

Answer 1

I would suggest using Ajax to call the server with an Id in parameters.
You need to add a class to your buttons and you do need to link a JS file and JQuery. here's an example.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="path/to/your/file.js"></script>
<div style="width:20%; float:left;">
<h3>Categories</h3>
<?php while($categories = $resultproductcategories->fetch_assoc()){?>
<div class="rows">
<input type="button" name="<?php echo $categories['id'] ?>" value="<?php echo $categories['category']?>" class="btnCategory"/>;
</div>
<?php }?>
And then, using ajax you can call your php file that returns the value you need to fetch from your database.
$(document).ready(function() {
$('.btnCategory').on('click', function(){
var id = $this.attr('name');
$.ajax({
url: 'path/to/your/file.php',
method: "GET",
data: {category_id: id},
success: function(data) {
//This is the data fetch from the server
console.log(data);
},
error: function(err) {
console.error('An error occurred : ' + err);
}
});
});
});
And then, when your PHP file receive the parameter $_GET['category_id'] you call your database.
<?php
if(isset($_GET['category_id'])){
//An id was post in the url.
$stmtproducts = $mysqli->prepare("SELECT * FROM store_products sp INNER JOIN store_product_categories spc ON sp.product_category=spc.id WHERE sp.store_id=? AND sp.category=? LIMIT $count, 10");
$stmtproducts->bind_param("ii",$_SESSION['storeid'],$_POST['']);
$stmtproducts->execute();
$resultproducts = $stmtproducts->get_result();
$num=$resultproducts->num_rows;
$stmtproducts->close();
$result = array('row_count' => $num, 'result' => $resultproducts);
echo json_encode($result);
}
And then you return a json array of your result. That's what I would do.
Hope it helps !
Nic

Answer 2

You asked for a demo, here it is .
<?php
if(isset($_GET['category_id'])){
//An id was post in the url.
$stmtproducts = $mysqli->prepare("SELECT * FROM store_products sp INNER JOIN store_product_categories spc ON sp.product_category=spc.id WHERE sp.store_id=? AND sp.category=? LIMIT $count, 10");
$stmtproducts->bind_param("ii",$_SESSION['storeid'],$_POST['']);
$stmtproducts->execute();
$resultproducts = $stmtproducts->get_result();
$num=$resultproducts->num_rows;
$stmtproducts->close();
$result = array('row_count' => $num, 'result' => $resultproducts);
echo json_encode($result);
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div style="width:20%; float:left;">
<h3>Categories</h3>
<?php while($categories = $resultproductcategories->fetch_assoc()){?>
<div class="rows">
<input type="button" name="<?php echo $categories['id'] ?>" value="<?php echo $categories['category']?>" class="btnCategory"/>;
</div>
<?php }?>
</div>
<script>
$(document).ready(function() {
$('.btnCategory').on('click', function(){
var id = $this.attr('name');
$.ajax({
method: "GET",
data: {category_id: id},
success: function(data) {
//This is the data fetch from the server
console.log(data);
},
error: function(err) {
console.error('An error occurred : ' + err);
}
});
});
});
</script>