如何为Bootstraps模式传递数据

时间:2018-01-16 04:51:49

标签: javascript php html css twitter-bootstrap

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

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

3 个答案:

答案 0 :(得分:0)

你的$行在while循环中有效。

如果您只想使用一个模态并重复使用,则在单击按钮时需要使用ajax。

或将模态部分移动到内部循环。 配对模态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
        }
    }
?>

答案 1 :(得分:0)

试试这段代码:

<?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 -->

答案 2 :(得分:0)

尝试将按钮更改为:

 <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');
});