Bootstrap Modal with mysql data
I have an html table with a list of Product Name and ID, by clicking on the Product Name Link, I wanted to open Modal and show the Item relative to the ID.
I wanted to pass $ code to Model and get data. How should I do it?
My code is below ..
<a href="#myModal" data-toggle="modal" data-target="#myModal" data-code="@<? echo $code; ?>">Product 1</a>
<a href="#myModal" data-toggle="modal" data-target="#myModal" data-code="@<? echo $code; ?>">Product 2</a>
<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>
source to share
I figured out that Logan's answer would not work because it targeted classes instead of Ids. data-target
there must be a unique identifier for each modal link. I created a $ uid (unique identifier) variable and initialized it with one (alternatively you could use your primary key). Each modal will have an ID myModal+$uid
, and each link will point to a specific modal 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()){
?>
<a href="#myModal" data-toggle="modal" data-target="#myModal<?php echo $uid; ?>" data-code="@<? echo $code; ?>">Product <?echo $uid?></a>
<!-- 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 ?>
source to share
data-target
your link will determine what is modal to open. So you have to bind the attribute data-target
by adding class
your modal value attribute to data-target
your link attribute .
Try the following:
while(/* YOUR CONDITION FOR FETCHING DATA FROM YOUR DB */){
?>
<a href="#myModal" data-toggle="modal" data-target=".myModal<?php echo $uniqueid; ?>" data-code="@<? echo $code; ?>">Product 1</a>
<?php
<!-- START OF MODAL -->
<div class="modal fade myModal<?php echo $uniqueid; ?>" .....>
<!-- REST OF MODAL CODE -->
</div>
} /* END OF LOOP */
Just replace $uniqueid
with your primary key.
source to share