Bootstrap 3交互式远程模态

Question

I've a PHP web application that manage the conversation between two users, recorded in a MySQL database. The conversation is handled by the controller PHP, which stores the messages in the database, and then invokes the PHP template. In this template i've a modal like this:

<div class="modal fade" 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" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Data review</h4>

   </div>
   <div class="modal-body">
      <! -- CONTENT HERE -->
   </div>
   <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

   </div>
  </div>
</div>

The modal is opened automatically from the controller index.php, through this:

header('Location: ./#myModal');

And the controller "pass" to the modal, the message text and the sender.

The problem is that every time a user sends a message, the modal disappears and then reappears, with the new message just sent in the conversation. Is it possible to avoid the modal appear and disappear, and that will always remain in the foreground on the page?

Can anyone help me?

Any suggestions will be greatly appreciated :) Thanks!

Answer 1

If you are reloading the page, you're losing the state. You are going to need to send the messages via AJAX, so you don't have the page reload.

Without knowing exactly what you're doing, and just trying to solve the problem you are describing, maybe you want have the page reload with the modal already invoked, so it's open at the time of the page load.