如何为 Bootstrap 模式传递数据答案

【问题标题】：How to pass data for Bootstraps modal如何为 Bootstrap 模式传递数据
【发布时间】：2023-04-01 12:58:01
【问题描述】：

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

    <?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"]; ?> 只显示数据库的最后一行。

【问题讨论】：

可以通过Ajax获取记录。
@Virb - 如果没有 ajax 我无法解决这个问题？
你的 $row["postID"] 不在 while 循环中！！
而您正在使用循环外的$row 变量
您可以使用$_GET，但它是不安全的。我建议将 Ajax 与 POST 一起使用。

标签： javascript php html css twitter-bootstrap

【解决方案1】：

你的 $row 在 while 循环中是有效的。

如果你想只使用一个modal并重用，你需要在点击按钮时使用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
        }
    }
?>

【讨论】：

我现在把它移到了 while 循环中。但是该行的值只是给我数据库的最后一个数据，即使我点击其他只有一个值显示
哦，这可能是模态 ID 的问题。好的，先生，现在我明白了！非常感谢你做的这些！所以问题与我的行一样多，这也是我的模态的数量，所以我只会调用与我按下的 id 相同的模态。非常感谢楼主！
这是我的荣幸 :)

【解决方案2】：

试试这个代码：

<?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 $_POST["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 -->

【讨论】：

【解决方案3】：

尝试将您的按钮更改为：

 <button class="btn btn-lg btn-block btn-my-button" name="postDetail" data-title="<?php  echo $row['postID']; ?>"><?php echo $row['postID']; ?></button>

只需将您需要的值与 data-* 一起放入按钮中，然后将 jquery 与您的按钮的类一起添加。

jquery:

$('.btn-my-button').click(function(){
$('#myModal .modal-title').text($(this).data('title'));
$('#myModal').modal('show');
});

【讨论】：