Display specific row data in bootstrap modal with the click of an edit button

Question

I am new to programming and trying to implement bootstrap modal to display row data from a table into a modal window. I tried the solution found in stackoverflow "Extract information from a table in modal for editing" by Kylek. But could not display a specific line with $ row ['SFID']. I can pull out the table data, but when I click the edit button in front of any row, it always shows the last row identifier and does not display the data in the input field on the modal. Here I am, so far, please help me.

<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> <a href="#" class="btn" data-dismiss="modal">Close</a> </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> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> </div> </div> </div> </td> </tr> <?php $i++; } ?> </table> 

Answer 2

take $ i = 1 higher for the loop and increment it at each iteration of the while loop, so it will take every entry

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

This is because you are filling in the edited modal with the $row data, which by that time was on the last element.

To get data for a specific row, you can create a javascript object / array and then extract the data using the data-rfid parameter in the "Edit" link. Or you can get the string using Ajax, for example.