我如何通过一行的ID从我的数据库到一个模态对话框 - How do i pass the ID of a row from my database to a modal dialog?

我有一个模态对话框，我希望它在我的数据库中显示一行的特定字段基于该特定行的ID。我试图通过行ID从数据库到模态对话框，这样我就可以使用它的查询，但我有挑战，我如何做到这一点?

 <?php
    $result = mysqli_query($con,"SELECT * FROM general_reservation ");
    $count = mysqli_num_rows($result);
echo "<b><center><h3>Cars Reserved By Districts</h3></center></b><br><br>";
while($row=mysqli_fetch_array($result)){
    $reservation_id = $row['reservation_id'];
    ?>
    <tr>
         <td><a  name="reserver"  data-id="myModal"  class="btn btn-link" data-toggle="modal" href="#myModal" >Reserver's Profile</a></td>
    </tr>
    <?php
$reserver = $row['reservation_id'];
    } //end of while loop ?>
    </tbody>
</table> 
<div class="modal fade" id="myModal" role="dialog">
             <div class="modal-dialog modal-sm">
             <div class="modal-content">
             <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><center>Reserver</center></h4>
            </div>
            <?php 
            $reserver = $row['reservation_id'];
        $reservation_id = 'reservation_id' ;
        $result = mysqli_query($con,"SELECT * FROM general_reservation WHERE reservation_id = '$reserver' ");
        $count = mysqli_num_rows($result);
        while($row=mysqli_fetch_array($result)){
                ?>
        <div class="modal-body">
        <p ><strong>First Name: </strong><?php echo $row['fname'];?> </p><br>
        <p ><strong>Last Name: </strong><?php echo $row['lname'];?></p><br>
        <p ><strong>Mobile Number: </strong><?php echo $row['mobile_number'];?></p>
        </div>
        <?php } //end of while loop ?>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div> 
  </div>

我也有同样的问题，我曾尝试过jQuery对话框，许多已知和未知的弹出式插件甚至从codecanyon支付了一个，但没有像bootstrap模组那样开箱即用，每个弹出式插件都必须编写自定义代码来在PHP内工作，而循环，然后下一个问题是用新内容刷新模组，而不刷新页面。

我的方法与引导模式是，我创建了一个单独的php文件在您的情况下reservation-profile.php，并添加href与id链接的文件，并调用弹出模式。

<?php
    $result = mysqli_query($con,"SELECT * FROM general_reservation ");
    $count = mysqli_num_rows($result);
    echo "<b><center><h3>Cars Reserved By Districts</h3></center></b><br><br>";
    while($row=mysqli_fetch_array($result)){
        $reservation_id = $row['reservation_id'];
    ?>
    <tr><td>
     <a data-toggle="modal" href="reservation-profile.php?id=<?php echo $reservation_id;?>" data-target="#myModal" class="btn btn-link">Reserver's Profile</a>
    </td></tr>
<?php
    //$reserver = $row['reservation_id']; //Don't Need this
    } //end of while loop
?>
//Bootstrap Modal
<div class="modal fade" id="myModal">
     <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <strong>Loading...</strong>
        </div>
    </div>
</div>

现在像这样创建一个reservation-profile.php文件

<?php
//Include database connection here
$reserver = $_GET["id"]; //escape the string if you like
$result = mysqli_query($con,"SELECT * FROM general_reservation WHERE reservation_id = '$reserver' ");
//$count = mysqli_num_rows($result); //Don't need to count the rows too
$row = mysqli_fetch_array($result); //Don't need the loop if you wana fetch only single row against id
?>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title"><center>Reserver</center></h4>
</div>
<div class="modal-body">
    <p ><strong>First Name: </strong><?php echo $row['fname'];?> </p><br>
    <p ><strong>Last Name: </strong><?php echo $row['lname'];?></p><br>
    <p ><strong>Mobile Number: </strong><?php echo $row['mobile_number'];?></p>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

最后也是最重要的部分是在不刷新页面的情况下用新的细节来刷新模态。

下面的一段代码完成了这项工作。你可以在这里阅读更多信息
注意:将以下代码添加到调用模态的页面。不要在reservation-profile.php

中添加此内容

//First jQuery Library
//Bootstrap Library
<script>
$( document ).ready(function() {
    $('#myModal').on('hidden.bs.modal', function () {
          $(this).removeData('bs.modal');
    });
});
</script>

所以整个解决方案是开箱即用的，不需要编写任何额外的代码行