问题
Whenever I clicked the view button, in a specific person, the modal is giving me a wrong data.
I clicked Paul's data from the table, and the modal is giving me Kharen's data, I want to display the correct data when selected.
PHP code so far for displaying of table only
<?php
$rs = $PDOCon->prepare("SELECT * FROM applicant)
");
if ($rs->execute()) {
}else{
echo "<script type='text/javascript'>alert('Invalid ID!');</script>";
}
$str="<div class='demo_jui'><table style='color: black;' cellpadding='0' cellspacing='0' border='1' class='display' id='tbl' class='jtable'>";
$str.="
<thead>
<tr>
<th>Applicant ID</th>
<th>Full Name</th>
<th>Applied Job</th>
<th>Date Applied</th>
<th>Action</th>
</tr>
</thead>
<tbody>";
while($row=$rs->fetch(PDO::FETCH_ASSOC)){
$str.= "<tr>";
$str.= "<td>" .( $row['people_id']) . "</td>";
$people_id= $row['people_id'];
$str.= "<td>" .($row['FName']) . " " .( $row['MName']) . " " .( $row['LName']) ."</td>";
$LName= $row['LName'];
$FName= $row['FName'];
$MName= $row['MName'];
$str.= "<td >" .( $row['job_description']) . "</td>";
$str.= "<td >" .( $row['applicant_applied_date']) . "</td>";
$str.= "<td ><a href='' data-toggle='modal' data-target='#myModal'><i class='fa fa-eye'> VIEW RESUME</i></a></td> ";
$str.= "</tr>";
}
echo $str;
echo "</tbody></table></div>";
Code above will display the data from the database.
Modal is in the same page as the first one. Here it is:
echo '<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">';
echo '<div class="modal-dialog modal-md">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo '<button type="button" class="close" data-dismiss="modal">×</button>';
echo '<h5 class="modal-title">View Applicant Information</h5>';
echo '</div>';
echo '<div class="modal-body">';
echo '<label style="font-weight: bold;"><strong>Name: </strong>'.$LName.', '.$FName.' '.$MName.'</label></br>';
echo '<label><strong>Email Address: </strong></label> </br>';
echo '<label><strong>Contact Number: </strong></label> </br>';
echo '<a href=encode_view.php?id='.$people_id.' type="submit">VIEW DETAILED RESUME</a>';
echo '<a href=print_pdf_2.php?id='.$people_id.' type="submit" class="btn btn-primary">VIEW PDF RESUME</a>';
echo '<a href=print_pdf.php?id='.$people_id.' type="submit" class="btn btn-primary">VIEW HH PDF RESUME</a>';
echo '</div>';
echo '</div></div></div></div>'; ?>
This is my code so far, I'm new to PHP, should I use Javascript, in getting the value, but I'm not familiar in Javascript?
Any idea?
回答1:
You can use the below template.
Added people id in the view links so that the modal will know which particular record to retrieve.
Replace:
$str.= "<td ><a href='' data-toggle='modal' data-target='#myModal'><i class='fa fa-eye'> VIEW RESUME</i></a></td> ";
With:
$str.= "<td ><a href='' data-toggle='modal' data-people-id='".$people_id."' data-target='#myModal'><i class='fa fa-eye'> VIEW RESUME</i></a></td> ";
On modal open, the below code retrieves the record from database using the people id that is in the view link. This uses ajax and a separate php file to retrieve the record of the relevant person.
Use this modal handler:
<script>
$('#myModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget);
var people_id = button.data('people-id');
var modal = $(this);
$.ajax({
type: "POST",
url: "get_person.php",
data: {
'people_id': people_id,
'submit': 'submit',
},
success: function(res) {
var response = JSON.parse(res);
var row = response.data;
if (response.status == "success") {
var full_name = row.FName + " " + row.MName + " " + row.LName;
$(modal).find('.modal-body').html('<label style="font-weight: bold;"><strong>Name: </strong>'+full_name+'</label></br>');
} else {
alert(response.msg);
}
}
});
});
</script>
The below code will respond with the requested record in json format to display in the modal.
Create a file named get_person.php
if(isset($_POST['submit'])){
$people_id = isset($_POST['people_id'])?$_POST['people_id']:0;
if($people_id > 0){
$dbh = new PDO('mysql:host=localhost;dbname=peeps', 'dbuser','dbpasss');
$stmt = $dbh->prepare("SELECT * FROM tblname WHERE people_id = :people_id");
$stmt->bindValue(":people_id", $people_id);
if($stmt->execute()){
$row = $stmt->fetch(PDO::FETCH_ASSOC);
exit(json_encode(array('status'=>'success', 'data'=>$row)));
}
}
}
exit(json_encode(array('status'=>'fail', 'msg'=>'Failed to fetch data!')));
回答2:
Your issue is due probably because you reset people_id every row with the last value.
$people_id= $row['people_id'];
You must store all data in an array and after report the data on the page. So you can have the correct matching between the different elements in the page
回答3:
You need to load the applicant data dynamically
If you don't know (or you don't want) make an ajax req.:
Change this line:
$str.= "<td ><a href='' data-toggle='modal' data-target='#myModal'><i class='fa fa-eye'> VIEW RESUME</i></a></td> ";
whit this:
$str.= "<td ><a href='' data-toggle='modal' data-target='#myModal'><i class='fa fa-eye' data-LName="'.$LName.'" data-FName="'.$FName.'" data-MName="'.$MName.'" data-people_id="'.$people_id.'" > VIEW RESUME</i></a></td> ";
Change your modal to this (you can remove php of the modal):
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">View Applicant Information</h5>
</div>
<div class="modal-body">
<label style="font-weight: bold;"><strong>Name: </strong><span class="LName"></span>, <span class="FName"></span> <span class="MName"></span></label></br>
<label><strong>Email Address: </strong></label> </br>
<label><strong>Contact Number: </strong></label> </br>
<a href="#" type="submit" class="resume-link">VIEW DETAILED RESUME</a>
<a href="#" type="submit" class="btn btn-primary resumepdf-link">VIEW PDF RESUME</a>
<a href="#" type="submit" class="btn btn-primary resumehh-link">VIEW HH PDF RESUME</a>
</div>
</div>
</div>
</div>
And add this script to the end of your page:
$('#myModal').on('show.bs.modal', function (event) {
var applicant = $(event.relatedTarget);
var LName = applicant.data('LName');
var FName = applicant.data('FName');
var MName = applicant.data('MName');
var people_id = applicant.data('people_id');
modal.find('.modal-LName').text(LName);
modal.find('.modal-FName').text(FName);
modal.find('.modal-MName').text(MName);
modal.find('.resume-link').attr('src', 'encode_view.php?id='+people_id);
modal.find('.resumepdf-link').attr('src', 'print_pdf_2.php?id='+people_id);
modal.find('.resumehh-link').attr('src', 'print_pdf.php?id='+people_id);
});
来源：https://stackoverflow.com/questions/50383763/passing-data-from-table-to-modal-using-php