Есть ли способ обновить div с новым содержимым только с помощью ajax

Question

Это div, который я обновляю

, но я хочу добавлять активный класс к элементу (li) каждый раз, когда div обновляет активный класс, уходя, поэтому я не хочу обновлять sh все данные в (ul), но добавить (li), только если есть новые данные в базе данных, без обновления предыдущих (li) элементов

<div id="contacts">
    <ul id="rooms" class="rooms">
        <!-- This is where the data get inserted -->

        <!-- the ajax call and this  -->

        <li class='contact' data-val='<?php echo $room['id']; ?>'>
            <div class='wrap'>
                <div class='meta'>  
                    <p class='name'><?php echo $room['sender']; ?></p>
                    <p class='preview'><?php echo $room['senderemail']; ?></p>
                </div>
            </div>
        </li>


    </ul>
</div>

это мой ajax позвоните

$(document).ready(function() {
    var interval = setInterval(function(){
        $.ajax({
            url: 'rooms.php',
            success: function(data){
                $('#rooms').html(data);
            }
        });
    }, 1000);
});

в номер php

    $rooms = get_rooms();
    foreach($rooms as $room){
        ?>
        <li class='contact' data-val='<?php echo $room['id']; ?>'>
            <div class='wrap'>
                <div class='meta'>  
                    <p class='name'><?php echo $room['sender']; ?></p>
                    <p class='preview'><?php echo $room['senderemail']; ?></p>
                </div>
            </div>
        </li>
        <?php
    }

функция get_rooms ()

function get_rooms() {
        $sql = "SELECT id, sender, senderemail FROM chatroom ";
        $result = mysqli_query($GLOBALS['dbh'], $sql);
        $rooms = array();   
        while($room = mysqli_fetch_assoc($result)){
            $rooms[] = array('id'=>$room['id'], 'sender'=>$room['sender'], 
                              'senderemail'=>$room['senderemail']);
        }
        return $rooms;
}

Answer 1

Если я правильно вас понимаю, ваша проблема в том, что вы теряете активный класс (который вы щелкнули по контейнеру li), когда появляются новые данные.

Это связано с тем, что вы обмениваетесь всем контентом.

Теперь есть три варианта. Либо

1. Вы даете комнатам. php идентификатор текущего активного li-контейнера, и этот скрипт устанавливает активный класс для затронутого контейнера.

2. Вы переводите все чаты (идентификаторы), которые уже показаны, в комнаты. php и загружаете только новые (это означает, что позже потребуется выполнить сортировку).

3. Вы сохраняете активный класс li и переустанавливаете его после изменения содержимого (это самое быстрое)

fe: в вашем Ajax следующие функции:

let id=0;
let active_li = $('li.active');
if (active_li.length>0) id=active_li.data('val');
$('#rooms').html(data);
if (id!=0) $('li[data-val="'+id+'"]').addClass ('active');

Несколько других мыслей:

Обратите внимание на интервал 1000 мс. Возможно, это создает проблемы, если запрос длится дольше 1000 мс. Это может все еще хорошо работать в ваших тестах, но, возможно, больше не будет, если в вашем приложении сотни или 1000 пользователей.

Не имеет смысла сообщать серверу, когда вы щелкаете активную комнату и сохраняете ее в сеансе, чтобы сервер знал, какая комната активна в клиенте?

Answer 2

Вам просто нужно добавить sh новых данных в div, как показано ниже, просто замените вашу строку на:

$('#rooms').append(data);

, это добавит новые <li> в ваши существующие <div> после последний <li>

jquery append ()

Чтобы получить идентификатор последнего <li>

var lastId = $( "#rooms li" ).last().attr('id');

Получив последний идентификатор, передайте его в своем ajax звонке.

Answer 3

Вам нужно просто обновить JS код, например:

$(document).ready(function() {
var active_list = '';
var interval = setInterval(function(){
    $.ajax({
        url: 'rooms.php',
        beforeSend: function(){
            active_list = $('#rooms').find('li.contact.active').attr('data-val');
        }
        success: function(data){
            $('#rooms').html(data);
            $(data).find('li[data-val="' + active_list +'"]').addClass('active');
        }
    });
}, 1000);

});

Это должно решить вашу проблему, и дайте мне знать, если у вас все еще есть какие-либо проблемы.