javascript - 如何为 Bootstraps 模态传递数据

Question

尝试将我的按钮的值传递到我的 Bootstrap 模态，但模态没有接收到任何数据。该按钮内部有其数据，但对模态使用相同的变量不起作用。这是我的代码。

    <?PHP
$query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";

$result = mysqli_query($conn, $query);

if (mysqli_num_rows($result) > 0) {
  while ($row = mysqli_fetch_assoc($result)) {
    ?>
      <div class="container post" style="border: 1px solid black;">
          <h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname'];  ?></h4>
          <p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
          <p class="post"><?PHP echo $row['postDetail'];?></p>
          <button data-toggle="modal" data-target="#myModal" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP  echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
          <Br>
      </div>
    <?PHP

    ?>

 <!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"><?PHP  echo $row["postID"]; ?></h4>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
    <!-- Modal content-->
  </div>
</div>
  <!-- Modal -->

<?PHP
  }
}

?>

模态正在显示，但 <?PHP echo $row["postID"]; ?>只显示数据库的最后一行。

Answer 1

您的 $row 在 while 循环中有效。

如果你只想使用一个模态并重复使用，你需要在点击按钮时使用ajax。

或将模态部分移动到 while 循环内部。 配对模态 div 的 id 和按钮的数据目标。 每个模式必须有不同的 ID。在您的情况下，postID 将是很好的标识符。

<?PHP
    $query = "SELECT * FROM tbl_posts INNER JOIN tbl_user ON tbl_posts.userID = tbl_user.userID WHERE postStatus = 'Show' ORDER BY postDateTime DESC;";

    $result = mysqli_query($conn, $query);

    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) { 
        ?>
    <div class="container post" style="border: 1px solid black;">
        <h4><?PHP echo $row['userFirstname'] . " " . $row['userLastname'];  ?></h4>
        <p class="time"><?PHP echo time_elapsed_string($row['postDateTime']); ?></p>
        <p class="post"><?PHP echo $row['postDetail'];?></p>
        <button data-toggle="modal" data-target="#myModal_<?PHP echo $row['postID']; ?>" type="submit" class="btn btn-lg btn-block" name="postDetail" value="<?PHP  echo $row['postID'] ?>"><?PHP echo $row['postID']; ?></button>
        <Br>
    </div>

    <!-- Modal -->
    <div id="myModal_<?PHP echo $row['postID']; ?>" class="modal fade" role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"><?PHP  echo $row["postID"]; ?></h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- Modal content-->
        </div>
    </div>
    <!-- Modal -->
<?PHP
        }
    }
?>