2

É possível perguntar através do javascript se existe alguma coisa nova em uma lista ul - li?

Tipo estou trabalhando com um refresh de serInterval, porem não esta muito dinâmico, pq? Quando a caixa recebe uma nova mensagem a Scroll Height não desce automaticamente..

inserir a descrição da imagem aqui

Nesse exemplo acabei de receber uma nova mensagem (Vermelho indica onde a scroll esta, Azul novo espaço na Scroll Height). A lista ul - li recebe, porem fica onde estava na ultima vez.

Então, há alguma forma de poder sinalizar que recebeu alguma nova li (mensagem), para o usuário?

Cada li que separa as mensagem são nomeadas com uma classe assim:

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

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


CÓDIGO 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);
}


CÓDIGO que chama o 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);    
}

Desde já agradeço. ;)

3
  • 1
    Você tem controle sobre o código que insere o li? O ideal seria interceptar o momento da inserção, em vez de ficar verificando com setInterval. Se não tiver controle, será que o seu plugin/API (de chat, ao que parece) não oferece alguma opção de callback ou evento quando algo novo é inserido?
    – bfavaretto
    Commented 31/07/2015 às 14:23
  • Se isso fosse feito em Angular, seria superfácil :p Commented 4/03/2017 às 22:29
  • Então, o código que faz a inserção da li, acredito que basta inserir uma classe por exemplo, unread, no seu setinterval você verifica se algum elemento tem esta classe, se tiver, faz o processo que precisar e remove esta classe. Commented 6/06/2017 às 20:59

3 Respostas 3

2

Há uma pequena biblioteca chamada insertionQuery que detecta a criação de nós usando uma macumba de animação CSS, então não gera peso. A interface não é jQuery, embora seja parecida:

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

Não testei porque não tenho acesso ao código para verificar que os seletores estão corretos, etc., mas o uso da biblioteca é bastante simples, se você baixar a versão minificada (no link, acima) e incluí-la na página.

0

Use esse evento fora do seu setInterval:

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

Se o seu ajax estiver apenas adicionando as novas mensagens, ou seja, o li referente a mensagem, isso vai funcionar. Mas caso o seu ajax atualize todo o conteúdo você terá que adaptar isso de outra forma.

Exemplo no jsfiddle.

4
  • imaginei isso, verifiquei mas realmente não funcionou por conta que o setInterval ele altera toda a ul, o ideal pegar a ultima classe da li e depois caso uma nova entre ele da uma alerta.. Commented 31/07/2015 às 14:35
  • 1
    Deve funcionar se você colocar em um elemento mais acima na hierarquia então. Porém, esse evento faz parte de um módulo descontinuado do DOM, e é possível que seja removido dos navegadores futuramente.
    – bfavaretto
    Commented 31/07/2015 às 14:38
  • tentei fazer dessa forma i.imgur.com/4v7gsHl.png, mas ele sempre retorna dizendo que esta diferente, mas retorna como undefined ;( Commented 31/07/2015 às 15:51
  • Pensei em uma forma mais simples, porém se esse evento deve ser descontinuado melhor não usa-lo. Tem outras alternativas usando logica de programacao mesmo. Por exemplo deixar uma variavel global que diz quantas 'li' tinha na ul. E depois pelo setinterval vc verifica se existe a mesma quantidade ou se aumentou.
    – Joao Paulo
    Commented 31/07/2015 às 16:31
0

Talvez seja mais fácil você usar um setTimeout lá dentro, pra processar a mudança do scroll após o html ser alterado:

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

Não vou te explicar o porquê do setTimeout "zerado", porque temos essa pergunta com respostas aqui no site:

Por que as vezes é necessário o setTimeout com valor 0 (zero)?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .