javascript - 如何为Bootstrap模式传递数据

标签 javascript php html css twitter-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"]; ?>仅显示数据库的最后一行。

最佳答案

您的$ 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
        }
    }
?>

关于javascript - 如何为Bootstrap模式传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48274298/

相关文章:

javascript - 使用图像 map 时,鼠标悬停时图像闪烁javascript

php - Paypal 立即购买按钮无需运送任何东西?

javascript - 如何正确选择 Canvas 宽度?

html - 如何在三列布局的中间固定一个div?

javascript - 在协程中包装 ES6 类方法

javascript - JavaScript 中的引用问题?

javascript - 如何在 onclick 事件期间更改 href

php - Laravel:如何在 Controller 方法执行后重定向

php - mysql php join语句

javascript - DOM react 时间过长