Bootstrap Modal with mysql data - php

Question

I have a html table with list of Product Name and ID, upon clicking the Product Name Link I wanted to open a Modal and show the Item with respect to ID.
I wanted to pass $code to the Model and retrieve data. How should I do?
My code below..
Product 1
Product 2
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<?
$code_id = isset($_GET['code']) ? $_GET['code'] : false;
$result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
$result->bindValue(':code', $code_id, PDO::PARAM_STR);
$result->execute();
$row = $result->fetch(PDO::FETCH_ASSOC);
$unit = $row['unit']; $name = $row['name']; $price = $row['price'];
?>
<table class="table">
<tr>
<th style="text-align: center;">#</th>
<th style="text-align: center;">Unit</th>
<th style="text-align: center;">Product Name</th>
<th style="text-align: center;">Price</th>
</tr>
<tr>
<td><? echo $i; ?></td>
<td><? echo $unit; ?></td>
<td><? echo $name; ?></td>
<td><? echo $price; ?></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

Answer 1

I realized Logan's answer wouldn't work because he was targeting classes instead of Ids. data-target for each link to modal should be a unique id. I created a variable $uid (unique identifier), and initialised it to one (alternatively you could use your primary key). Each modal will have an id of myModal+$uid, and each link will point to a specific modal's id.
<?php
$code_id = isset($_GET['code']) ? $_GET['code'] : false;
$result = $db->prepare("SELECT * FROM $tbl_name WHERE id=:code LIMIT 1");
$result->bindValue(':code', $code_id, PDO::PARAM_STR);
$result->execute();
//checks if there are results before sending it to the while loop
if ($result->num_rows > 0) {
$uid = 1;//alternatively you can use your primary key from the table
while($row = $result->fetch_assoc()){
?>
Product <?echo $uid?>
<!-- start modal, realise the id of each modal -->
<div class="modal fade" id="myModal<?php echo $uid; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal fade">
<!--the rest of your code-->
</div>
<?php
$uid = $uid +1;//increase uid
}// end while
}//end if statement ?>

Answer 2

The data-target of your link would determine what modal to open. So you have to link the attribute of data-target by having the class attribute of your modal the same with the data-target attribute of your link.
Try this:
while(/* YOUR CONDITION FOR FETCHING DATA FROM YOUR DB */){
?>
Product 1
<?php
<!-- START OF MODAL -->
<div class="modal fade myModal<?php echo $uniqueid; ?>" .....>
<!-- REST OF MODAL CODE -->
</div>
} /* END OF LOOP */
Just replace the $uniqueid with your primary key.