jQuery .load () проблема с функцией для перезагрузки DIV в режиме реального времени bootstrap - PullRequest
Новая
       75

jQuery .load () проблема с функцией для перезагрузки DIV в режиме реального времени bootstrap

0 голосов
/ 30 апреля 2020

Давайте сначала посмотрим настройки.

сообщений. php

<div class="container">
    <div class="row">
        <img src="images/loader.gif" id="loader">
        <div class="msgcontent content" id="bodycontent">
            <div class="getmsglist"></div>
        </div>
    </div>
</div>
<div class="modal chatbox fade" id="chatbox" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
            <div class="container">
          <div class="row">
            <div class="header pos-rel" style="box-shadow: none">
              <div class="site-title">Priyanka Jaiswal</div>
            </div>
          </div>
        </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="loadchat"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

chatbox. php

<?php
include('../functions.php');

$mem = (!empty($_POST['memid']))?$_POST['memid']:null;

if($_POST){
  $stmt = $pdo->prepare("SELECT * FROM messages WHERE (msg_from = :mem AND msg_to = :user) OR (msg_from = :user AND msg_to = :mem) ORDER BY msg_time ASC");
  $stmt-> bindValue(':mem', $mem);
  $stmt-> bindValue(':user', $sessionUser);
  $stmt-> execute();
?>
<div class="chattingbox">
  <div class="alert alert-info chatboxwarning text-center">
    <i class="fa fa-lock"></i>&nbsp; Messages to this chat are secured with end-to-end encryption and are unaccessible to the third parties.
  </div>
  <?php while($chat = $stmt->fetch()){ ?>
    <div class="bubble">
      <div class="bubbleinside <?php if($chat['msg_from'] == $mem && $chat['msg_to'] == $sessionUser){ echo "sender-s"; }else{ echo "receiver-s"; } ?>">
        <div class="sender">
          <?php echo $chat['msg_message']; ?>
          <div class="msgtime"><?php echo date('h:i a', strtotime($chat['msg_time'])); ?></div>
        </div>
      </div>
    </div>
  <?php } ?>
</div>
<?php } ?>
<div class="msgsender">
  <button class="btn msgplusbtn"><i class="fa fa-plus"></i></button>
  <div class="chatmsg" contenteditable></div>
  <button class="btn msgsendbtn"><i class="fa fa-paper-plane"></i></button>
</div>

custom. js

// Load Chat Box
$('.msgcontent').on('click', '.messagebox', function() {
  var memid = $(this).data('chat');
  var dataString = {
    memid: memid
  };
  $.ajax({
    type: 'POST',
    url: 'processes/chatbox.php',
    data: dataString,
    cache: true,
    success: function(data){
      $('.loadchat').html(data);
      $('.chatbox').modal('show');
    }
  });
  return false;
});

Приведенная выше настройка работает нормально для загрузки чата, но я хочу, чтобы chatbox.php refre sh автоматически добавлялся для каждого нового сообщения. Вот что я пытался сделать: 

setInterval(function(){
  $('.loadchat').load('processes/chatbox.php');
}, 500);

Но я думаю, что это неправильно, поскольку loadchat находится внутри модального bootstrap и, следовательно, чтобы открыть чат, сначала открывается модальный bootstrap, нажав на пользователь из списка в чат. Следовательно, если кто-то может предложить способ автоматической загрузки чата для живого чата, буду благодарен. Это было бы детской игрой, если бы мне пришлось загружать чат на новой странице, а не загружать в модальном режиме. Но здесь я совершенно запутался. Любая помощь будет оценена.

...