How to check by javascript if you have entered a new li tag through setInterval?

Question

It is possible to ask through javascript if there is something new in a list ul - li?

Like I’m working with a refresh of serInterval, but it is not very dynamic, pq? When the box receives a new message to Scroll Height does not descend automatically..

In this example I just received a new message (Red indicates where the scroll is, Blue new space in Scroll Height). The list ul - li But stay where you were last time.

So is there any way you can signal that you’ve received some new li (message), for the user?

Each li separating messages are named with a class like this:

<li class="colorBox_<?php print $id_m; ?>">...</li> 

// $id_m é o id da mensagem na tabela mysql

CODE setInterval:

var loop = setInterval;

function setLoop(de, para, nome) {
    var url_ss = $("#url_b").val();
    var url_s = $("#url_s").val();

    clearInterval(loop);
        loop = setInterval(function() {
        $.ajax({
            type: "POST",
            url: url_ss+"/956309372.php",
            data: 'de='+de+'&para='+para+'&url_s='+url_s,
            cache: false,
            success: function(html) {
                $("#mensChat div._5chat").html(html);
            }
        });
    }, 1000);
}

CODE that calls the setInterval:

function openWidChat(de,para,nome) {
    var url_s = $("#url_s").val();
    $.ajax({
        url: url_s +"/chat/chat.php",
        data:'de='+de+'&para='+para+'&url_s='+url_s,
        type: "POST",
        cache: false,
        success : function(html){
            $("#mensChat div#chat_"+para).html(html);
            $("._5chat").scrollTop($("._5chat")[0].scrollHeight);
    });

    setLoop(de, para, nome);    
}

Thanks in advance. ;)

Answer 1

There’s a little library called insertionQuery that detects the creation of nodes using a macumba of CSS animation, so it does not generate weight. The interface is not jQuery, although it is similar:

insertionQ("li[class^='colorBox_']").every(function (el) {
    $("._5chat").scrollTop(el.scrollHeight);
});

I didn’t test because I don’t have access to the code to verify that the selectors are correct, etc., but the use of the library is quite simple, if you download the minified version (in the link above) and include it in the page.

Answer 2

Maybe it’s easier for you to use one setTimeout inside, to process scroll change after html is changed:

function openWidChat(de,para,nome) {
    var url_s = $("#url_s").val();
    $.ajax({
        url: url_s +"/chat/chat.php",
        data:'de='+de+'&para='+para+'&url_s='+url_s,
        type: "POST",
        cache: false,
        success : function(html){
            $("#mensChat div#chat_"+para).html(html);


            setTimeout(function () {
                $("._5chat").scrollTop($("._5chat")[0].scrollHeight);
            })
    });

    setLoop(de, para, nome);    
}

I’m not going to explain to you why setTimeout "zeroed", because we have this question with answers here on the site:

Why you sometimes need setTimeout with a value of 0 (zero)?

Answer 3

Use this event outside your setInterval:

$('ul').bind("DOMSubtreeModified",function(){
   alert("ul foi modificada");
});

If your ajax is just adding new messages, ie li for the message, this will work. But if your ajax updates all the content you will have to adapt it in another way.

Example in jsfiddle.