is there a way to update a div with new content only using ajax

Question

This is the div that i am updating

but i want to add a active class to the (li) item every time the div refreshes the active class goes away so i don`t want to refresh all the data in the (ul) but only add (li) if there is a new data in the database, with out refreshing the previous (li) items

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

this is my ajax call

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

in the room 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
    }

the get_rooms() function

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

You need to simply update your JS code like:

$(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);

});

This should solve your problem and Let me know if you still face any issue.

Answer 2

If I understand you correctly, your problem is that you lose the active class (which you clicked on the li container) when there is new data.

This has to do with the fact that you exchange all of the content.

There are now three options. Either

1. You give the rooms.php the id of the currently active li-container and this script sets the active class for the affected container.

2. You transfer all the chatrooms (ids) already shown to rooms.php and only load the new ones (this means effort later with sorting).

3. You save the active li class and re set it after content changed (this is the fastest)

fe: in your Ajax succes functions:

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

A few other thoughts:

Note the interval of 1000ms. Possible it makes Problems if the request lasts longer than 1000ms. This may still work well in your tests, but maybe not anymore if there are a hundred or 1000 users in your application.

Doesn't it make sense to tell the server when you click the active room and save it in a session so that the server knows which room is active in the client?

Answer 3

You Just need to push new data to the div as below just replace your line with:

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

this will add new <li> in your existing <div> after the last <li>

jquery append()

To get the id of the last <li>

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

Once you get the last id then pass it in your ajax call.