Update div after jquery ajax request only if content is new

Question

I've recently started learning jQuery and I'm trying to make a little messaging system, I've gotten the messages to update every 2 seconds. However, I don't want the messages to update if there aren't any new messages. This is my current message updating code.

$(document).ready(function () {
setInterval(function() {
    $.get("get_messages.php", function (result) {
        if ($('.messages').html() != result){
        $('.messages').html(result);
        }
    });
}, 2000);

});

The if statement doesn't seem to be working even though the div and result should be the same.

Answer 1

I hope that you have timestamp or messageID on server that could tell your script if there are new messages after last check.

ex.

var lastMessageID = 0;
function checkMessages(){
$.ajax(url,{

    data:{
       last_message_id:lastMessageID
    },
    success:function(data){
    // Count new messages
    if (Object.keys(data).length > 0){  
        $.each(data,function(index, item){
            $('.messages').prepend("<span class='message'>"+item.message+"</span>");
    });
    // We suggest that this is our last message 
    lastMessageId = data[Object.keys(data).length-1].id;
    }
 }
});
}
var intervalM = setInterval(function(){
     checkMessages();
},2000);

And please save some trees by using gziped JSON data. :)