How to check for javascript if a new li tag entered through setInterval?

Question

How to check for javascript if a new li tag entered through setInterval?

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

2

Is it possible to ask through javascript if there is anything new in a list ul - li ?

I'm working with a refresh of serInterval , but it's not very dynamic, why? When the box receives a new message the Scroll Height does not descend automatically ..

InthisexampleIjustreceivedanewmessage(Red)wherethescrollis,BluenewspaceinScrollHeight.Thelistul-lireceives,butstayswhereitwaslasttime.

So,isthereanywayIcansignalthatIgotsomenewli(message)fortheuser?

Eachlithatseparatesthemessagesisnamedwithaclasslikethis:

<liclass="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 calling 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);    
}

Thank you in advance. ;)

php mysql javascript html5

asked by anonymous 31.07.2015 / 15:32

3 answers

Why graph API only returns to 25 groups? Excel VBA - Change cell between True and False

score 2 · Answer 1

There is a small library called insertionQuery that detects node creation using a CSS animation macumba, so it does not generate weight. The interface is not jQuery, although it looks similar:

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

I did not test because I do not 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 on the page.

score 0 · Answer 2

Use this event outside of your setInterval:

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

If your ajax is only adding the new messages, ie the 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 on jsfiddle .

score 0 · Answer 3

It may be easier for you to use a setTimeout inside, to process the scrolling after the html has been 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 tell you why% of% "zeroed out", because we have this question with answers here on the site:

Why is it necessary to setTimeout with value 0 (zero)?