使用PHP将数据从表传递到模态

时间：2018-05-17 05:14:31

标签： php html-table

每当我点击视图按钮时，在特定的人中，模态会给我一个错误的数据。

example image

我从桌子上点击了Paul的数据，模态给了我Kharen的数据，我想在选中时显示正确的数据。

到目前为止

PHP代码仅显示表格 

<?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>";

上面的代码将显示数据库中的数据。

模态与第一页位于同一页面。这是：

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">&times;</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>';     ?>

这是我的代码到目前为止，我是PHP的新手，我应该使用Javascript来获取值，但我对Javascript不熟悉？

有什么想法吗？

3 个答案:

答案 0 :(得分：2)

您可以使用以下模板。

在视图链接中添加了人员ID，以便模式将知道要检索的特定记录。

<强>替换 

$str.= "<td ><a href='' data-toggle='modal'  data-target='#myModal'><i class='fa fa-eye'> VIEW RESUME</i></a></td> ";

。通过 

$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> ";

在模态打开时，下面的代码使用视图链接中的人员ID从数据库中检索记录。这使用ajax和一个单独的php文件来检索相关人员的记录。

使用此模态处理程序：

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

以下代码将以json格式响应请求的记录，以显示在模态中。

创建名为 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!')));

答案 1 :(得分：1)

您的问题可能是因为您使用最后一个值重置people_id每一行。

$ people_id = $ row ['people_id'];

您必须将所有数据存储在数组中，然后在页面上报告数据。 因此，您可以在页面中的不同元素之间进行正确匹配

答案 2 :(得分：0)

您需要动态加载申请人数据

如果您不知道（或您不想要）制作ajax req。：

更改此行：

$str.= "<td ><a href='' data-toggle='modal'  data-target='#myModal'><i class='fa fa-eye'> VIEW RESUME</i></a></td> ";

白衣：

$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> ";

将你的模态改为此（你可以删除模态的php）：

<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">&times;</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>

并将此脚本添加到页面的末尾：

$('#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);
});
相关问题
最新问题