How to fetch data from a variable passed to a modal? - php

Question

I have a dynamic table with edit and delete button. I was able to passed the variable $parid to modal. However, it's not fetching the data into the modal using the $parid. I cannot figure out what have i missed out. I just want to display the corresponding data using mysql code WHERE parid='$parid'. The value of $parid is passed to the <input type="text" name="parid" id="parid">. Here's my sample code:
<table id="example" class="table table-striped" >
<thead>
<tr>
<th>Param ID</th>
<th>Decription</th>
<th>Code</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
require 'lab/db/dbcon.php';
$query = $con->query("SELECT * FROM param");
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $row['parid'];?></td>
<td><?php echo $row['parnam']; ?></td>
<td><?php echo $row['parcod']; ?></td>
<td>
<!--edit button here-->
<a href="" class="btn btn-danger btn-xs btndel" data-toggle="modal" data-id="<?php echo $row['parid']; ?>" data-target="#delpar"><i class="fa fa-trash"></i>
</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<!-- Start Delete Par Modal -->
<div class="modal fade" id="delpar" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title"><i class="fa fa-exclamation-circle"></i> Are you sure to delete this record?</h5>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="parid" id="parid" disabled>
<table id="example" class="table table-bordered">
<thead>
<tr>
<th>Decription</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<?php
require 'lab/db/dbcon.php';
$parid=isset($_POST['parid']);
$query = $con->query("SELECT * FROM param WHERE parid ='$parid' ");
while($row=mysqli_fetch_array($query)){
?>
<tr>
<td><?php echo $row['parnam']; ?></td>
<td><?php echo $row['parcod']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<div class="modal-footer" style="padding:10px;">
<button type="button" class="btn btn-danger" name="btndel" id="btndel>"> <i class="fa fa-check"></i>
</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-remove"></i></button>
</div>
</div>
</div>
</div>
<!-- End Delete Par Modal -->
<script>
$(document).on("click", ".btndel", function () {
var parid = $(this).data('id');
$(".modal-body #parid").val( parid );
$('#delpar').modal('show');
});
</script>

Answer 1

You have lost track of the scope and timing of your PHP and jQuery code. The jQuery part:
<script>
$(document).on("click", ".btndel", function () {
var parid = $(this).data('id');
$(".modal-body #parid").val( parid );
$('#delpar').modal('show');
});
</script>
runs on the users browser after they have viewed what came from the server. The PHP code inside your "Delete Par Modal" runs on the server before the jQuery even gets to the browser.
In your jQuery you need to add an AJAX call to get the data you need FROM THE SERVER (where your query then runs and returns the data) in real time. Then "on success" the AJAX call should populate the Modal fields.