Bootstrap modal on each individual row - php

Question

Basically, the page is supposed to prompt the user (preferably with a modal) before confirming the action.I modified our web page so it would include modals on delete per individual row. The modal doesn't seem to open if I include id="modalname" on both the data-target button and on the modal id.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Full Name</th>
<th>Company</th>
<th>Address</th>
<th>Email</th>
<th>Contact No.</th>
<th>Birth Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect("localhost","root","","database");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$query=mysqli_query($con,"select * from client order by lname")or die(mysqli_error());
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $row['lname'];?>,
<?php echo $row['fname'];?> <?php echo $row['mname'];?> </td>
<td><?php echo $row['company'];?></td>
<td><?php echo $row['address'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['contact'];?></td>
<td><?php echo $row['bday'];?></td>
<td>
<button type="button" data-toggle="modal" data-target="#deletemodale<?php echo $row['id'];?>" >Open Modal</button>
</td>
</tr>
</tbody>
</table>
Here's a sample code for my table. It includes the echoed values from the database with a button on each row for the modal.
Modal Code:
<div class="modal fade" id="deletemodale<?php echo $row['id'];?>" 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>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I tried this with tag and href earlier, the row id seems to be showing on the url if I hover on it but the modal won't open on both cases. The modal also seems to open properly if I remove the php tag on its id. I also only have this modal code for the rest of the rows because of its dynamic nature

Answer 1

From what i see you code is valid, but i dont see where your while loop is ending. If you dont have your modal code inside your while loop only one modal html code will be printed, so there will be a modal only for the last row['id'].Is that the case? Also your while loop should be ending before the tbody tag.

Answer 2

I took the liberty and added closing brace for your while loop just after the last </tr> (before the </tbody> in your first piece of code. I also copied the second piece of your code (you named it "Modal Code") right before that closing brace – since you give different id’s per modal, I assume that each row in your table has own modal. And everything works fine on my WAMP server.
Make sure that:
You have included jquery.js, bootstrap.css and bootstrap.js
You have enabled javascript in your browser.