Bootstrap模态显示一秒然后消失

时间:2017-08-11 09:24:35

标签: php html twitter-bootstrap

所以基本上我正在创建一个从我的数据库加载数据的收件箱。但是我在触发我的模态时遇到了麻烦,我已经搜索但没有任何东西符合我的问题。要触发的按钮位于<form method="post">内,因为我有一个隐藏的input来检查所点击的行的ID。
顺便说一下,我的触发模态的按钮也会执行两(2)个mysqli查询。 这是我的代码:

<form method="post">
<input type="hidden" name="key" value="'.$value->id.'">
<button data-toggle="modal" data-target="#myModal" title="View" class="btn btn-primary btn-xs" name="inbox_view">
<span class="glyphicon glyphicon-list"></span></button>
<button title="Trash" class="btn btn-danger btn-xs" name="inbox_del">
<span class="glyphicon glyphicon-trash"></span></button>
</form>

执行查询的代码:

if(isset($_POST['inbox_view'])){
    $id = filter($_POST['key']);
    $type = '1';
    $stmt = $dbcon->query("SELECT * FROM messages WHERE id='$id' AND type='1'") or die(mysqli_error());
    $stmt2 = $dbcon->prepare("UPDATE messages SET seen='0' WHERE id=?") or die(mysqli_error());
    $stmt2->bind_param('s',$id);
    $stmt2->execute();
    while($row = mysqli_fetch_array($stmt)){
    $sender=$row['sender'];
    $msg=$row['msg'];
    $mdate=$row['mdate'];
    }
}

模态:

<div class="modal fade-in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><?php echo $value->sender; ?></h4>
      </div>
      <div class="modal-body">
        <!-- Description-->
        <div class="row">
          <div class="col-md-12">
          <p class="wrap"><?php echo $value->msg?></p>
          </div>
        </div>
        <!-- End Description-->
      </div>
      <div class="modal-footer">
      Received: <?php echo $value->mdate ?>
      </div>
    </div>
  </div>
</div>


我究竟做错了什么?我需要做些什么呢? PS:更新查询是检查邮件是否被读取 未读消息=粗体
阅读消息=正常

1 个答案:

答案 0 :(得分:1)

您的浏览器在点击按钮时提交表单。这就是为什么模态似乎是封闭的。事实上,在发送表单后,您会看到一个新的(但相同的)页面。您需要创建XHR请求以在不导航的情况下提交数据。

有关详细信息,请参阅https://api.jquery.com/jquery.post/