Question

我有一个员工数据库，可将员工图像从该数据库加载到引导网格中。在初始页面加载中，我将显示所有员工，然后单击各种按钮以根据查询更改视图。

我要坚持的是我要实现的引导程序模式。

我当前在模态中显示图像和其他信息，例如名称，工作地点等。但是，模态将仅显示第一幅图像（及相关信息），无论我从主页单击哪个图像。我的假设是，当我单击图像时，必须做一个ajax调用来为模态重新加载数据。我将执行MySQL查询，以从文件= $ imageURL的数据库中选择*。

我已经阅读了许多帖子，尽管我似乎无法弄清楚，但这似乎是我想要的帖子：bootstrap modal does not load new data from database

这是我目前正在使用的代码：除了最后一部分之外，我几乎可以完成所有工作。任何帮助表示赞赏！谢谢

<?php
 include ('db_connect.php');

 $sql = "SELECT * from monctonfir where 1 ";

 if(isset($_GET['specialty'])) $sql .= " AND specialty = '".$_GET['specialty']."' ";
 $sql .=" order by initials ASC";
 $result = $db->query($sql);

 if($result->num_rows > 0){
    while ($row = $result->fetch_assoc()){
        $imageURL = 'image/'.$row["file"];
        $initial = $row["initials"];
        $name = $row["name"];
        $location = $row["location"];

    ?>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Employee Profile</h5>
        <button type="button" class="close" data-dismiss="modal" aria- 
label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img src="<?php echo "$imageURL" ?>"/>
        <p style="text-align: right">Name: <?php echo $name ?></p>
        <p style="text-align: right">Location: <?php echo $location ?></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

    <!-- End Modal-->   
    <div id="photos" class = "col-lg-1 no-gutters" style="margin-top:1rem;">
    <div class="card" style="width: 6.5rem;">
    <a href = "#">
        <img id="staff" type="button" class="img card-img-top" data-toggle="modal" data-target="#exampleModal" src = "<?php echo $imageURL ?>"> 
    </a>
    <div class = "card-body">
        <h5 class = "card-title round-button" style="text-align: center;"><?php echo $initial  ?></h5>
    </div>

    </div>
    </div>


    <?php }
 } ?>

将数据库加载到Bootstrap模式

0 个答案: