Show Selected row full information on Modal View - php

Question

Example :
i have 6 Columns for every row.
Column1 = personid
Column2 = Image
Column3 = FirstName
Column4 = MiddleName
Column5 = LastName
Column6 = Position
Example:
Person ID Image FirstName MiddleName LastName Position
1 Picture1.jpg John Doe Peter Manager
The PHP Code is:
<?php
include('connect.php');
$selected=mysql_query("SELECT * FROM persontbl order by personid");
$i=1;
while($personrow=mysql_fetch_array($selected))
{
$personid=$personrow['personid'];
$personimage=$personrow['personimage'];
$firstname=$personrow['firstname'];
$middlename=$personrow['middlename'];
$lastname=$personrow['lastname'];
$position=$personrow['position'];
?>
I have created this code to display specific information of the row on grid view using bootstrap(Image and FirstName only):
<div class="col-sm-2">
<img src="<?php echo $personimage;?>" alt="">
<p><h5 align="center"><?php echo $FirstName; ?></h5></p>
<hr/>
</div>
And the modal form is:
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-info close" data-dismiss="modal">Close Form ×</button>
<h4 class="modal-title">Full Information of the Person</h4>
</div>
<div class="modal-body">
<p><img src="<?php echo $personimage; ?>" width="25%" height="25%" alt="">
<h5><b> Person's Name: </b></h5><?php echo $FirstName; ?></p>
<hr/>
<p><h5><b>Person's Middle Name: </b></h5><?php echo $middlename; ?></p>
<p><h5><b>Person's Last Name: </b></h5><?php echo $lastname; ?></p>
<p><h5><b>Person's Position: </b></h5><?php echo $position; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close Form</button>
</div>
</div>
Then I want to display full information on Modal View. Then When I click on one record row, the Modal View will pop up and display the full information for the SELECTED record ROW.
But NOW, The Modal shows only the information of the first row. When I click on another row, It's not showing the full information of the selected row, It only displays the first row's data. But It still opens the Modal.
What should I do to display the selected record full information from the database to the modal view using PDO Method? please support me with full code detail.

Answer 1

this is code i tested in localhost
<?php
include('login/dbconnect.php');
$selected=mysqli_query($conn,"SELECT * FROM leads");
$i=1;
?>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<?php
while($personrow=mysqli_fetch_array($selected))
{
$personid=$personrow['ID'];
$FirstName=$personrow['FIRST_NAME'];
?>
<div class="col-sm-2">
<img src="<?php echo $personimage;?>" alt="">
<p><h5 align="center"><?php echo $FirstName; ?></h5></p>
<hr/>
</div>
<div id="<?php echo $personid ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-info close" data-dismiss="modal">Close Form ×</button>
<h4 class="modal-title">Full Information of the Person</h4>
</div>
<div class="modal-body">
<p>hiiiiiiiiiiiiiiii</p>
<p><?php echo $FirstName; ?></p>
<!-- <h5><b> Person's Name: </b></h5><?php echo $FirstName; ?></p>
<hr/>
<p><h5><b>Person's Middle Name: </b></h5><?php echo $middlename; ?></p>
<p><h5><b>Person's Last Name: </b></h5><?php echo $lastname; ?></p>
<p><h5><b>Person's Position: </b></h5><?php echo $position; ?></p> -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close Form</button>
</div>
</div>
</div>
</div>
<?php
}
?>

Answer 2

pass unique id on each row and in html tag use onclick method and pass the id
based on id u can fetch the data from the database by using ajax and then show the modal
Example :
<a href = '#' onclick = '<?php callback(echo $id);?>' >click here </a>
the java-script code like
<script>
function callback($id){
var $id = $id;
$.ajax({
url : '<?php echo $fetch_url?>';
type: 'post',
data : {id,$id},
success : function(data){
var data = eval(data);
$.each(data,function(index ,value){
$('#some_id').html(value.key_of_value);
$('#some_id').html(value.key_of_value);
});
$('#popupmodel').modal('show');
}
});
}
</script>
also no need to write this inside <a> tag data-toggle="modal" data-target="#myModal"
and set the default modal like as
<div id="popupmodel" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
some header
</div>
<input type = 'text' id= 'some_id'>//as per your requirement
</div>
</div>
fetch url will be your pdo query code. and after getting the result
convert it json using json_encode method and echo the result in fetch url
code like echo json_encode($fetch_data);

Answer 3

you have to use dynamic id to call every person info .use personid as id of anchor tag and modal id .
<?php
include('connect.php');
$selected=mysql_query("SELECT * FROM persontbl order by personid");
$i=1;
while($personrow=mysql_fetch_array($selected))
{
$personid=$personrow['personid'];
$personimage=$personrow['personimage'];
$firstname=$personrow['firstname'];
$middlename=$personrow['middlename'];
$lastname=$personrow['lastname'];
$position=$personrow['position'];
<div class="col-sm-2">
<img src="<?php echo $personimage;?>" alt="">
<p><h5 align="center"><?php echo $FirstName; ?></h5></p>
<hr/>
</div>
<div id="<?php echo $personid ?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-info close" data-dismiss="modal">Close Form ×</button>
<h4 class="modal-title">Full Information of the Person</h4>
</div>
<div class="modal-body">
<p><img src="<?php echo $personimage; ?>" width="25%" height="25%" alt="">
<h5><b> Person's Name: </b></h5><?php echo $FirstName; ?></p>
<hr/>
<p><h5><b>Person's Middle Name: </b></h5><?php echo $middlename; ?></p>
<p><h5><b>Person's Last Name: </b></h5><?php echo $lastname; ?></p>
<p><h5><b>Person's Position: </b></h5><?php echo $position; ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close Form</button>
</div>
</div>
</div>
</div>
}
?>