单击按钮 php mysql 后，在模式弹出窗口上显示基于所选 id 的数据

Posted 2023-02-24

【中文标题】单击按钮 php mysql 后，在模式弹出窗口上显示基于所选 id 的数据

【英文标题】：Show data based of selected id on modal popup window after click a button php mysql

【发布时间】：2016-03-12 13:05:04

【问题描述】：

在我的网站上，当点击按钮时，它会提示弹出一个窗口。我使用模态弹出窗口。我的问题是，我无法根据按钮的 id 获取正确的数据。下面是我的代码： html表：

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
                    $result = $conn->query($data);                          

                        while($ser=mysqli_fetch_array($result)) 
                        

?>  
                                            <tr>
                                                <td><center><?php echo $counter; 
                                                                    $counter++; ?></center></td>
                                                <td><center><?php echo $ser['fam_id'];?></center></td>
                                                <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

fam_id 是主键。

那么，下面是模态弹窗的代码

<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
      </div>
      <div class="modal-body">
        <b>Details</b>
        <hr></hr>
        Address: <?php echo $ser['fam_add']; ?><p></p>
        Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</form>

此外，我将它们放在一个文件中。总结如下：

<tbody>
    <?php
    $counter = 1;
    $data = "SELECT * FROM family"; 
                        $result = $conn->query($data);                          

                            while($ser=mysqli_fetch_array($result)) 
                            

    ?>  
                                                <tr>
                                                    <td><center><?php echo $counter; 
                                                                        $counter++; ?></center></td>
                                                    <td><center><?php echo $ser['fam_id'];?></center></td>
                                                    <td><center><?php echo $ser['fam_name']; ?></center></td>

                                                    <td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>

<!-- Modal -->
    <form id="form1" method="post">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
          </div>
          <div class="modal-body">
            <b>Details</b>
            <hr></hr>
            Address: <?php echo $ser['fam_add']; ?><p></p>
            Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    </form>
</td>
</tr>
<?php

?>
</tbody>

【问题讨论】：

“弹出模式对话框”？您意识到执行模态对话框的脚本不止一个吗？您还没有展示任何实际弹出的代码，因此我们无法为您提供帮助。

实际弹出的代码是什么？告诉我如果我错过了什么@MarcB

您为从数据库中提取的每个族创建一个模式对话框。根据您的 sql 查询，它可能是数百个对话，所有对话都具有相同的 id。这根本不对。由于您使用 ajax 标记了问题，因此请尝试仅创建一个对话框，然后通过 ajax 请求填充它。

【参考方案1】：

<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family"; 
$result = $conn->query($data);                          
while($ser=mysqli_fetch_array($result)) 

?>  
<tr>
    <td><center><?php echo $counter; $counter++; ?></center></td>
    <td><center><?php echo $ser['fam_id'];?></center></td>
    <td><center><?php echo $ser['fam_name']; ?></center></td>

    <td>
        <center>
            <a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
              <button class="btn btn-primary btn-sm">
                Edit Attendance Status
              </button>
            </a>
        </center>

将此代码放在 footer.php 或本页末尾。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>

通过 ajax 调用您的“somepage.php”（单独的页面。模态正文所在的位置）。将此 <script></script> 放在您的 JS 文件中。

<script>
$('.modalLink').click(function()
    var famID=$(this).attr('data-id');
    var famAddr=$(this).attr('data-addr');
    var famPhone=$(this).attr('data-phone');
    var famName=$(this).attr('data-name');

    $.ajax(url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result)
        $(".modal-content").html(result);
    );
);
</script>

somepage.php 创建 somepage.php （如果你想改变这个页面的名字。在<script></script>也改变。两者都是相关的。）

<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];

?>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
    <form id="form1" method="post">
        <b>Details</b>
        <hr></hr>
        Address: <p><?php echo $famAddr;?></p>
        Phone_num: <p><?php echo $famPhone;?></p>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

【讨论】：

我的 js 脚本有问题。放在哪里？ @娜娜派对卡

嗨@KrengKongkeng ：要么放入您的footer.php，要么放入您的通用js文件中。这段代码会起作用，我很确定。

模态弹出窗口看起来很好。但它无法定义我想要显示的值。我已经进行了查询，但它不起作用。它显示>未定义的变量@Nana Partykar

Tq.. 晚安先生 :) Nana Partykar

谢谢先生。你帮了很多忙..昨天我的查询出现语法错误.. tqsm！ @娜娜派对卡