bootstrap modal inside a php while loop to display different infornmation - php

Question

so i have a while loop and i am fethcing the name and the description of them from my db
so when ever i click on one of the parts i want the modal to display the name of the item that i clicked on in the modal i hope this picture would describe it better
below is the code i have so far
at the moment when i click on the modal i get displayed the name of the item which is first on the list no matter where i click
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>

Answer 1

You are not doing things the way you have to do. You are re-creating your mymodal for every iteration of your while loop which is not a better way to achieve what you want.
Follow these steps:
Create your mymodal outside of your while loop.
Pass the ID of current row to a javascript function and populate the data of that id using javascript.
I have set the things which needs to be done. Try the following code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--- display table header row-->
<table style="width:100%">
<tr>
<th>name</th>
<th>description</th>
<th>Action</th>
</tr>
<?php
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description'];
$id = $row['id']; // I am assuming that your table has auto incremented primary key column by the name of id, if not then replace that by $row['your_id_column']
?>
<!--- desplay the data in a table row -->
<tr>
<td id="<?php echo "name_".$id; ?>"><?php echo $name; ?></td>
<td id="<?php echo "description_".$id; ?>"><?php echo $description ; ?></td>
<td><div href="#" data-toggle="modal" data-target="#mymodal" onClick="showModal(<?php echo $id ; ?>)">Edit</div></td>
</tr>
<?php } ?>
</table>
<!--- Your modal -->
<div id="mymodal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p id="name"></p> <!--- name will be shown here-->
<p id="description"></p><!--- description will be shown here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function showModal(id)
{
// setting the values of clicked item in the bootstrap Modal
$("#name").text($("#name_"+id).text());
$("#description").text($("#description_"+id).text());
}
</script>

Answer 2

Looks like you are not serializing the modals... If you wanted to do things that way your code should be something like;
<!-- language-all: lang-html -->
while($row = mysqli_fetch_assoc($result)) {
$procuct_id = $row['ID'];
$name = $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#mymodal_<?php echo $procuct_id;?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="mymodal_<?php echo $procuct_id;?>" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php }
<--
A Better way to do it would be to write a javascript function to show the generic modal window, then run an ajax call to load your info into the "modal-body" div. You would have to pass a unique id to the call in order to have your ajax script hit the db and get the info to display.

Answer 3

It's been almost 4 years but I'm writing for everyone; change data-target(id) as row id.
edited code:
while($row = mysqli_fetch_assoc($result))
{
$name= $row['name_of_product'];
$description = $row['description']
?>
<a href="#" data-toggle="modal" data-target="#<?php echo $row['id']; ?>">
<div class="col-sm-4">
<?php echo name; ?>
<?php echo description ; ?>
</div>
</a>
<div id="<?php echo $row['id']; ?>" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p><?php echo $name; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php } ?>