how to show datas in database in a table using modal - html

Question

I want the data in my table to be clickable and show in a modal.
then get the id of that data(from the table) and show the rest of the data in the database in that modal.
I tried following this but it doesn't work, I dunno why
<table class="table table-hover table-bordered results" style="color:white;">
<thead>
<tr>
<th>Contact #</th>
<th>Picture</th>
<th >Name / Surname</th>
<th >Address</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<?php
$sqlb = "select * from debtors ";
$resultb = $conn->query($sqlb);
while($rowb = $resultb->fetch_assoc()){
$id=$rowb['contact #'];
?>
<tr a class="dropdown-item" data-toggle="modal" data-target="#logoutModal" style="color:white;">
<td><?php echo $rowb['contact #']; ?></td>
<td><?php echo $rowb['lname']; ?></td>
<td><?php echo $rowb['fname']; ?></td>
<td><?php echo $rowb['address']; ?></td></a>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<!-- Logout Modal-->
<span>
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
</div>
<div class="modal-body"><?php echo $rowb['lname']; ?>, <?php echo $rowb['fname']; ?><BR>
<?php echo $rowb['balance']; ?>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-info" href="admin_logout.php">Yes</a>
</div>
</div>
</div>
</div>
</span>
I want my table row to show modal when clicked, then show data relating to the clicked row from the database in that modal

Answer 1

First of all the modal is not in the loop so you can't access $rowb in modal and secondly this is not the right way because after putting the modal in the loop it will create so many (hundreds or thousands) modals which is not good performance wise.
The right way is, create a modal and assign a class to the button and put the numeric id in the id attribute and on the click of that button make an ajax call and get the data and show it in the modal.
In this way the single modal will show you the right data dynamically.

Answer 2

You can use instead the try catch for the tbody of your table.
try {
$pdo = new PDO('mysql:host=localhost:3306;dbname=databaseName;', 'username', 'password' );
$pdo->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$stmt = $pdo->prepare(
"SELECT * from debtors "
);
$flag = $stmt->execute();
if ( !$flag ) {
$info = $stmt->errorInfo();
exit( $info[2] );
}
while ( $row = $stmt->fetch( PDO::FETCH_ASSOC ) ) {
$num = $num +1;
#$tbody .='<tr>';
//$tbody .='<td>'.$row["id"].'</td>
$tbody .='<td>'.$num.'</td
<input type="hidden" id="id'.$row["id"].'" value="'.$row["id"].'"/>
<input type="hidden" id="contact #'.$row["contact #"].'" value="'.$row["id"].'"/>
<input type="hidden" id="lname'.$row["id"].'" value="'.$row["lname"].'"/>
<input type="hidden" id="fname'.$row["id"].'" value="'.$row["fname"].'"/>
<input type="hidden" id="address'.$row["id"].'" value="'.$row["address"].'" />
';
$tbody .='<td>'.$row["contact #"].'</td>';
$tbody .='<td>'.$row["lname"].'</td>';
$tbody .='<td>'.$row["fname"].'</td>';
$tbody .='<td>P'.$row["address"].'</td>';
$tbody .='<td><input type ="button" id = "btnshow" value = "show" data-id="'.$row["id"].'"></input></td></a>';
}
}
catch ( PDOException $e ) {
echo $e->getMessage();
$pdo = null;
}
just make sure data in database has a unique ID's.
for the script :
$(document).on('click','#btnshow',function(){
var id_show = $(this).data('id');
var contact= document.getElementById('contact #'+id_edit).value;
var lname= document.getElementById('lname'+id_edit).value;
var fname= document.getElementById('fname'+id_edit).value;
var address= document.getElementById('address'+id_edit).value;
$(".modal-heading").html('')
$(".modal-body").html(
'<div class = "container-fluid" style="width:89%;" >' +
'<input type="hidden" class="form-control" id="id_row" name="id_row" value="'+ id_edit +'"></input>'+ <input type="text" id="contact" name= "contact" readonly="readonly" class="form-control" value="'+contact #+'"></input>'+ <input type="text" id="lname" name= "lname" readonly="readonly" class="form-control" value="'+lname+'"></input>'+ <input type="text" id="fname" name= "fname" readonly="readonly" class="form-control" value="'+fname+'"></input>'+<input type="text" id="address" name= "address" readonly="readonly" class="form-control" value="'+address+'"></input>'+
'</form></div>'
)
})
your html :
<table id ="products">
<col width="130">
<col width="80">
<thead>
<th>ID</th>
<th>CONTACT</th>
<th>LNAME</th>
<th>FNAME</th>
<th>ADDRESS</th>
</thead>
<tbody>
<?php echo $tbody;?>
</tbody>
</table>