Display specific row data in bootstrap modal with edit button click - php

Question

I am new to programming and trying to implement bootstrap modal to display row data from a mysql table into the modal window.
I have tried the solution found on stackoverflow "Pull information from mysql table to bootstrap modal to edit" by link. But could not able to display the particular row with the $row['SFID'].
I can pull table data but when I click the edit button in front of any row it always show the last row id
and doesn't display the data in the input box on the modal to edit the data???.
Here I am till now, Please help me out.
<table class="table table-bordered" width="100%">
<thead>
<tr>
<th>SFID</th>
<th>Company</th>
<th>Product</th>
<th>Product Line</th>
<th>Dealer Class</th>
<th>Status</th>
</tr>
</thead>
<?php
$query = "SELECT * FROM tblcustomer";
$stmt = $db->prepare($query);
$stmt->execute();
foreach ($stmt as $row): ?>
<tr>
<?php $rowID = $row['SFID']; ?>
<td><?php echo $row['SFID']; ?></td>
<td><?php echo $row['CompanyName']; ?></td>
<td><?php echo $row['Product']; ?></td>
<td><?php echo $row['ProductLine']; ?></td>
<td><?php echo $row['DealerClass']; ?></td>
<td><?php echo $row['RequestStatus']; ?></td>
<td style="text-align: center">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-danger" href="#delModal" data-toggle="modal"><i class="icon-trash icon-white"></i> Delete</a>
<?php echo "<a class='btn update' href='#editModal' data-sfid='".$row['SFID']."' role='button' data-toggle='modal'>Edit</a>"; ?>
</div>
</div>
</td>
</tr>
<?php endforeach; ?>
</table>
<div id="editModal" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Edit Customer Details</h3>
</div>
<div>
<form class="contact">
<fieldset>
<div class="modal-body">
<?php echo $row['SFID']; ?>
<ul class="nav nav-list">
<li class="nav-header">SFID</li>
<li><input class="input-xlarge" type="text" name="mysfid" id="mysfid"></li>
<!--<li class="nav-header">Company</li>
<li><input class="input-xlarge" value=" " type="text" name="mycompany"></li>
<li class="nav-header">Dealer Class</li>
<li><input class="input-xlarge" value=" " type="text" name="mydealerclass"></li> -->
</ul>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">Approved</button>
Close
</div>
</div>
<script>
$(document).ready(function(){
$('a.edit').click(function(){
var sfid = $(this).data('sfid');
var company = $(this).data('company');
var dealerclass = $(this).data('dealerclass');
$('#mysfid').val(sfid);
$('#mycompany').val(company);
$('#mydealerclass').val(dealerclass);
});
});
</script>
Thanks for your help.

Answer 1

<table class="table table-bordered" width="100%">
<thead>
<tr>
<th>SFID</th>
<th>Company</th>
<th>Product</th>
<th>Product Line</th>
<th>Dealer Class</th>
<th>Status</th>
</tr>
</thead>
<?php
$query = "SELECT * FROM tblcustomer";
$result = mysql_query($query);
$i=1;
while($row = mysql_fetch_assoc($result))
{
?>
<tr>
<?php $rowID = $row['SFID']; ?>
<td><?php echo $row['SFID']; ?></td>
<td><?php echo $row['CompanyName']; ?></td>
<td><?php echo $row['Product']; ?></td>
<td><?php echo $row['ProductLine']; ?></td>
<td><?php echo $row['DealerClass']; ?></td>
<td><?php echo $row['RequestStatus']; ?></td>
<td style="text-align: center">
<div class="btn-toolbar">
<div class="btn-group">
<a class="btn btn-danger" href="#delModal" data-toggle="modal"><i class="icon-trash icon-white"></i> Delete</a>
<a class="btn update" href="#editModal<?php echo$i?>" data-sfid='"<?php echo $row['SFID'];?>"' data-toggle="modal">Edit</a>
<!--Yor Edit Modal Goes Here-->
<div id="editModal<?php echo $i; ?>" class="modal hide fade in" role="dialog" ria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Edit Customer Details</h3>
</div>
<div>
<form class="contact">
<fieldset>
<div class="modal-body">
<?php echo $row['SFID']; ?>
<ul class="nav nav-list">
<li class="nav-header">SFID</li>
<li><input class="input-xlarge" type="text" name="mysfid" id="mysfid"></li>
<!--<li class="nav-header">Company</li>
<li><input class="input-xlarge" value=" " type="text" name="mycompany"></li>
<li class="nav-header">Dealer Class</li>
<li><input class="input-xlarge" value=" " type="text" name="mydealerclass"></li> -->
</ul>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="submit">Approved</button>
Close
</div>
</div>
</div>
</div>
</td>
</tr>
<?php $i++; } ?>
</table>

Answer 2

take $i = 1 above for loop and increament it in each iteration of for loop..so it will take each records
Your Form
<a class='btn update' href='#editModal<?php echo $i;?>' data-sfid='".$row['SFID']."' role='button' data-toggle='modal'>Edit</a>
Modal Window
<div id="editModal<?php echo $i;?>" class="modal hide fade in" style="display: none; ">

Answer 3

That's because you fill the edit modal with the $row data, which by then, is on the last item.
To get data for a specific row, you could create a javascript object/array and then fetch the data by making use of the data-rfid parameter in the "Edit" link. Or you can fetch the row with Ajax for example.