Question

示例：

每行有6列。

    Column1 = personid
    Column2 = Image
    Column3 = FirstName
    Column4 = MiddleName
    Column5 = LastName
    Column6 = Position

示例：

Person ID  Image          FirstName    MiddleName   LastName   Position
    1      Picture1.jpg   John         Doe          Peter      Manager

PHP代码是：

<?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'];

?>

我创建了此代码，使用bootstrap（仅限Image和FirstName）显示网格视图中行的特定信息：

<div class="col-sm-2">
<a href="" data-toggle="modal" data-target="#myModal" class="thumbnail home-thumb"><img src="<?php echo $personimage;?>" alt=""></a>
<p><h5 align="center"><?php echo $FirstName; ?></h5></p>
<hr/>
</div>

模态形式是：

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-info close" data-dismiss="modal">Close Form &times;</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>

然后我想显示有关模态视图的完整信息。然后当我单击一个记录行时，将弹出模态视图并显示SELECTED记录行的完整信息。

但是，现在，模态仅显示第一行的信息。当我点击另一行时，它没有显示所选行的完整信息，它只显示第一行的数据。但它仍然打开了莫代尔。

如何使用PDO方法将所选记录的完整信息从数据库显示到模态视图？请支持我完整的代码细节。

Answer 1

在每一行传递唯一ID，在html标签中使用onclick方法并传递id 基于id你可以使用ajax从数据库中获取数据，然后显示模态

示例：

<a href = '#' onclick = '<?php callback(echo $id);?>' >click here </a>

像

这样的java脚本代码

<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>

也无需在<a>标记内写入数据-toggle =＆＃34; modal＆＃34;数据目标=＆＃34;＃myModal＆＃34; 并设置默认模式，如

<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>

获取网址将是您的pdo查询代码。得到结果后使用json_encode方法将其转换为json，并在fetch url中回显结果代码如echo json_encode（$ fetch_data）;

Answer 2

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">
	<a href="" data-toggle="modal" data-target="#<?php echo $personid ?>" class="thumbnail home-thumb"><img src="<?php echo $personimage;?>" alt=""></a>
	<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 &times;</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>
	
}

?>

Answer 3

这是我在localhost中测试的代码

＆＃13;

<?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">
	<a href="" data-toggle="modal" data-target="#<?php echo $personid ?>" class="thumbnail home-thumb"><img src="<?php echo $personimage;?>" alt=""></a>
	<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 &times;</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	
}

?>

＆＃13;

显示关于模态视图的所选行完整信息

3 个答案: