I have a set of products in pagination in products.php , and i when i click "Details" button, i want a modal to popup and show each product Specification that i have in products_details.php.
Page Example : https://i.sstatic.net/8QMbx.jpg
My code right now only show the 5th ID of each page. If i am at page 1, it will show A05 of that page when i click details. If i am at page 2, it will show A10 of that page when i click details.
Below is my products.php
<?php
include_once 'products_crud.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Paw Empire : Products</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<?php include_once 'nav_bar.php'; ?>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="page-header">
<h2>Create New Product</h2>
</div>
<form action="products.php" method="post" class="form-horizontal">
<div class="form-group">
<label for="productid" class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<input name="pid" type="text" class="form-control" id="productid" placeholder="Product ID" value="<?php if(isset($_GET['edit'])) echo $editrow['fld_product_num']; ?>" required>
</div>
</div>
<div class="form-group">
<label for="productname" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input name="name" type="text" class="form-control" id="productname" placeholder="Product Name" value="<?php if(isset($_GET['edit'])) echo $editrow['fld_product_name']; ?>" required>
</div>
</div>
<div class="form-group">
<label for="productprice" class="col-sm-3 control-label">Price (RM)</label>
<div class="col-sm-9">
<input name="price" type="number" class="form-control" id="productprice" placeholder="Product Price" value="<?php if(isset($_GET['edit'])) echo $editrow['fld_product_price']; ?>" min="0.0" step="0.01" required>
</div>
</div>
<div class="form-group">
<label for="productq" class="col-sm-3 control-label">Quantity</label>
<div class="col-sm-9">
<input name="quantity" type="number" class="form-control" id="productq" placeholder="Product Quantity" value="<?php if(isset($_GET['edit'])) echo $editrow['fld_product_quantity']; ?>" min="0" required>
</div>
</div>
<div class="form-group">
<label for="producttype" class="col-sm-3 control-label">Type</label>
<div class="col-sm-9">
<select name="type" class="form-control" id="producttype" required>
<option value="">Please select</option>
<option value="Cat" <?php if(isset($_GET['edit'])) if($editrow['fld_product_type']=="Cat") echo "selected"; ?>>Cat</option>
<option value="Cat Food" <?php if(isset($_GET['edit'])) if($editrow['fld_product_type']=="Cat Food") echo "selected"; ?>>Cat Food</option>
<option value="Cat Toys" <?php if(isset($_GET['edit'])) if($editrow['fld_product_type']=="Cat Toys") echo "selected"; ?>>Cat Toys</option>
</select>
</div>
</div>
<div class="form-group">
<label for="supplier" class="col-sm-3 control-label">Supplier</label>
<div class="col-sm-9">
<select name="supplier" class="form-control" id="supplier" required>
<option value="">Please select</option>
<option value="My Pets Library" <?php if(isset($_GET['edit'])) if($editrow['fld_product_supplier']=="My Pets Library") echo "selected"; ?>>My Pets Library</option>
<option value="Pet Lovers Centre" <?php if(isset($_GET['edit'])) if($editrow['fld_product_supplier']=="Pet Lovers Centre") echo "selected"; ?>>Pet Lovers Centre</option>
<option value="Pet Smart" <?php if(isset($_GET['edit'])) if($editrow['fld_product_supplier']=="Pet Smart") echo "selected"; ?>>Pet Smart</option>
</select>
</div>
</div>
<div class="form-group">
<label for="productshipping" class="col-sm-3 control-label">Shipping Price (RM)</label>
<div class="col-sm-9">
<input name="shipping" type="number" class="form-control" id="productshipping" placeholder="Shipping Price" value="<?php if(isset($_GET['edit'])) echo $editrow['fld_product_price']; ?>" min="0.0" step="0.01" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<?php if (isset($_GET['edit'])) { ?>
<input type="hidden" name="oldpid" value="<?php echo $editrow['fld_product_num']; ?>">
<button class="btn btn-default" type="submit" name="update"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Update</button>
<?php } else { ?>
<button class="btn btn-default" type="submit" name="create"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create</button>
<?php } ?>
<button class="btn btn-default" type="reset"><span class="glyphicon glyphicon-erase" aria-hidden="true"></span> Clear</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<div class="page-header">
<h2>Products List</h2>
</div>
<table class="table table-striped table-bordered">
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Price (RM)</th>
<th>Quantity</th>
<th>Type</th>
<th>Supplier</th>
<th>Shipping Price (RM)</th>
<th></th>
</tr>
<?php
// Read
$per_page = 5;
if (isset($_GET["page"]))
$page = $_GET["page"];
else
$page = 1;
$start_from = ($page-1) * $per_page;
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("select * from tbl_products_a180834_pt2 LIMIT $start_from, $per_page");
$stmt->execute();
$result = $stmt->fetchAll();
}
catch(PDOException $e){
echo "Error: " . $e->getMessage();
}
foreach($result as $readrow) {
?>
<tr>
<td><?php echo $readrow['fld_product_num']; ?></td>
<td><?php echo $readrow['fld_product_name']; ?></td>
<td><?php echo $readrow['fld_product_price']; ?></td>
<td><?php echo $readrow['fld_product_quantity']; ?></td>
<td><?php echo $readrow['fld_product_type']; ?></td>
<td><?php echo $readrow['fld_product_supplier']; ?></td>
<td><?php echo $readrow['fld_product_shipping']; ?></td>
<td>
<button type="button" class="btn btn-warning btn-xs" data-toggle="myModal" data-target="#exampleModal">Details</button>
<a href="products.php?edit=<?php echo $readrow['fld_product_num']; ?>" class="btn btn-success btn-xs" role="button"> Edit </a>
<a href="products.php?delete=<?php echo $readrow['fld_product_num']; ?>" onclick="return confirm('Are you sure to delete?');" class="btn btn-danger btn-xs" role="button">Delete</a>
</td>
</tr>
<?php } ?>
</table>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<nav>
<ul class="pagination">
<?php
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT * FROM tbl_products_a180834_pt2");
$stmt->execute();
$result = $stmt->fetchAll();
$total_records = count($result);
}
catch(PDOException $e){
echo "Error: " . $e->getMessage();
}
$total_pages = ceil($total_records / $per_page);
?>
<?php if ($page==1) { ?>
<li class="disabled"><span aria-hidden="true">«</span></li>
<?php } else { ?>
<li><a href="products.php?page=<?php echo $page-1 ?>" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<?php
}
for ($i=1; $i<=$total_pages; $i++)
if ($i == $page)
echo "<li class=\"active\"><a href=\"products.php?page=$i\">$i</a></li>";
else
echo "<li><a href=\"products.php?page=$i\">$i</a></li>";
?>
<?php if ($page==$total_pages) { ?>
<li class="disabled"><span aria-hidden="true">»</span></li>
<?php } else { ?>
<li><a href="products.php?page=<?php echo $page+1 ?>" aria-label="Previous"><span aria-hidden="true">»</span></a></li>
<?php } ?>
</ul>
</nav>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Paw Empire : Product Details</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('.btn-xs').on('click',function(){
$('.modal-body').load('products_details.php?pid=<?php echo $readrow['fld_product_num']; ?>',function(){
$('#myModal').modal({show:true});
});
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And below is my products_details.php
<?php
include_once 'database.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Paw Empire : Products Details</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<?php include_once 'nav_bar.php'; ?>
<?php
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT * FROM tbl_products_a180834_pt2 WHERE fld_product_num = :pid");
$stmt->bindParam(':pid', $pid, PDO::PARAM_STR);
$pid = $_GET['pid'];
$stmt->execute();
$readrow = $stmt->fetch(PDO::FETCH_ASSOC);
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
?>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-5 col-sm-offset-1 col-md-4 col-md-offset-2 well well-sm text-center">
<?php if ($readrow['fld_product_image'] == "" ) {
echo "No image";
}
else { ?>
<img src="products/<?php echo $readrow['fld_product_image'] ?>" class="img-responsive">
<?php } ?>
</div>
<div class="col-xs-12 col-sm-5 col-md-4">
<div class="panel panel-default">
<div class="panel-heading"><strong>Product Details</strong></div>
<div class="panel-body">
Below are specifications of the product.
</div>
<table class="table">
<tr>
<td class="col-xs-4 col-sm-4 col-md-4"><strong>Product ID</strong></td>
<td><?php echo $readrow['fld_product_num'] ?></td>
</tr>
<tr>
<td><strong>Name</strong></td>
<td><?php echo $readrow['fld_product_name'] ?></td>
</tr>
<tr>
<td><strong>Price (RM)</strong></td>
<td>RM <?php echo $readrow['fld_product_price'] ?></td>
</tr>
<tr>
<td><strong>Quantity</strong></td>
<td><?php echo $readrow['fld_product_quantity'] ?></td>
</tr>
<tr>
<td><strong>Type</strong></td>
<td><?php echo $readrow['fld_product_type'] ?></td>
</tr>
<tr>
<td><strong>Supplier</strong></td>
<td><?php echo $readrow['fld_product_supplier'] ?></td>
</tr>
<tr>
<td><strong>Shipping Price (RM)</strong></td>
<td><?php echo $readrow['fld_product_shipping'] ?></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
$('.modal-body').load('products_details.php?pid=<?php echo $readrow['fld_product_num']; ?>',function(){is set to the last element of yourforeachloop. You could add adataattribute to your details button or based on the click, grep the HTML from the event and extract the product number that way.