Detectar cambio de contenido en una div

tomymolina · #1 (**permalink**) 23/06/2011, 15:28

Hola a todos, vuelvo con un nuevo problema. Mi idea es crear un bot para tuenti que cada vez que hablan por el chat y el bot mode esté activado (tipo ausente para el msn plus) este deje un automensaje.
Decidí empezar por detectar el cambio en el div o span de la conversación para que cuando esta se modifique (es decir reciba un mensaje) ejecute una accion (en este caso la de enviar el automensaje.
Pues es esa mi duda, como podria detectar el cambio en una div/span para luego ejecutar la accion. Tampoco se si se puede hacer con Javascript o necesito AJAX.
Gracias de antemano.

InKarC · #2 (**permalink**) 23/06/2011, 20:37

Código Javascript:

Ver originaldocument.getElementById("chat").addEventListener("DOMNodeInserted", handler, true);
 
function handler(){
      // Lo que se ejecuta cuando cambia un nodo div o span dentro de #chat
}

Esto sirve para Chrome, Firefox y IE9, si quiere soportar navegadores mas antiguos eso si es un rollo mas largo.

tomymolina · #3 (**permalink**) 24/06/2011, 03:45

Vale lo voy probar, muchas gracias.

PD: Solo lo necesito para Chrome y Firefox para cargarlo como un UserScript :)

tomymolina · #4 (**permalink**) 24/06/2011, 04:27

No me funciona, tambien funciona con la etiqueta ul? Porque prove para que salte un alert y nada:

Código:

document.getElementById("dock_item_dialog_73209096").addEventListener("DOMNodeInserted", handler, true);
 
function handler(){
    alert("hola");
}

Panino5001 · #5 (**permalink**) 24/06/2011, 06:41

Probá con DOMSubtreeModified.

Código PHP:

  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">

</script>

</head>

<body>
<div id="dock_item_dialog_73209096">contenido original</div>
<script type="text/javascript">
document.getElementById('dock_item_dialog_73209096').addEventListener("DOMSubtreeModified", handler, true);
 
function handler(){
    alert("hola");
}
</script>
<div onclick="document.getElementById('dock_item_dialog_73209096').innerHTML='boo!';">cambiar</div>
</body>
</html>

tomymolina · #6 (**permalink**) 24/06/2011, 13:35

Gracias panino, ese ejemplo funciona pero en la pagina de tuenti mediante el script para el navegador no. Uso Chrome 13 beta. Esque no se trata de una div sinó de una etiqueta ul.

Código HTML:

<div class="chatDockDialogViewportFlow">
<ul id="dock_item_dialog_73209096">
<li class="me"><span class="sender">Eu</span>:&nbsp;hola</li>
<li class="separator"><hr></li>
<li class="received"><a id="dock_item_sender_link_65072267" href="javascript:void(0)" class="sender">Alba</a>:&nbsp;ola</li>
<li class="separator"><hr></li><li class="me"><span class="sender">Eu</span>:&nbsp;que tal</li>
<li>¿</li>
<li class="separator"><hr></li>
<li class="received"><a id="dock_item_sender_link_65072267" href="javascript:void(0)" class="sender">Alba</a>:&nbsp;bien</li>
<li>t?</li>
<li class="separator"><hr></li>
<li class="me"><span class="sender">Eu</span>:&nbsp;yo me voy chaoo</li><li>vengo en 1.5 min</li>
<li>o 2.33</li><li>nose</li><li>chao</li>
<li><img src="http://estaticosak1.tuenti.com//layout/web2-Zero/images/chat/6_emoticon_evilgrin.0497b628ba.png" alt=""></li>
<li class="info disconnected"><span>Fuches desconectado 21:31</span></li>
</ul>
</div>

Tengo que poner la id del ul porque la div en la que cual está contenido no tiene id. Al recibir un nuevo mensaje se va creando una nueva etiqueta li. No hay ninguna forma de ejectuar la funccion cuando se cree esta etiqueta li o que es lo mismo cuando se edite el contenido de la etiqueta li con id dock_item_dialog_73209096 (DOMSubtreeModified) o conseguirle añadir un id a la div en la que esta contenido. Gracias de antemano.

Panino5001 · #7 (**permalink**) 24/06/2011, 15:01

No sé nada de tuenti. Esto funciona en Chrome:

Código PHP:

  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

</head>

<body>
<div class="chatDockDialogViewportFlow">
<ul id="dock_item_dialog_73209096">
<li class="me"><span class="sender">Eu</span>:&nbsp;hola</li>
<li class="separator"><hr></li>
<li class="received"><a id="dock_item_sender_link_65072267" href="javascript:void(0)" class="sender">Alba</a>:&nbsp;ola</li>
<li class="separator"><hr></li><li class="me"><span class="sender">Eu</span>:&nbsp;que tal</li>
<li>¿</li>
<li class="separator"><hr></li>
<li class="received"><a id="dock_item_sender_link_65072267" href="javascript:void(0)" class="sender">Alba</a>:&nbsp;bien</li>
<li>t?</li>
<li class="separator"><hr></li>
<li class="me"><span class="sender">Eu</span>:&nbsp;yo me voy chaoo</li><li>vengo en 1.5 min</li>
<li>o 2.33</li><li>nose</li><li>chao</li>
<li><img src="http://estaticosak1.tuenti.com//layout/web2-Zero/images/chat/6_emoticon_evilgrin.0497b628ba.png" alt=""></li>
<li class="info disconnected"><span>Fuches desconectado 21:31</span></li>
</ul>
</div>
<div onclick="document.getElementById('dock_item_dialog_73209096').innerHTML='<li>boo!</li>';">cambiar</div>
<div onclick="li=document.createElement('li');li.appendChild(document.createTextNode('hola!'));document.getElementById('dock_item_dialog_73209096').appendChild(li)">cambiar 2</div>
<script type="text/javascript">
document.getElementById('dock_item_dialog_73209096').addEventListener("DOMSubtreeModified", handler, true);
 
function handler(){
    alert("hola");
}
</script>
</body>
</html>

Y esto funciona en cualquier navegador:

Código PHP:

  <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript">
var DR=function(f){//implementación rápida de DOMReady
    if(document.addEventListener){
        var func=function(){f();document.removeEventListener('DOMContentLoaded',func,false);}
        document.addEventListener('DOMContentLoaded',func,false);
    }else{
        function r(f){/in/.test(document.readyState)?setTimeout(function(){r(f);},9):f();};
        r(f);
    }
}
function notificar(m){
    alert(m);
}
var ns={}
DR(function(){//implementación rápida de un monitor de cambios
    ns.recordar=document.getElementById('dock_item_dialog_73209096').innerHTML;
    var inter=setInterval(
                          function(){
                              if(document.getElementById('dock_item_dialog_73209096').innerHTML!=ns.recordar){
                                  ns.recordar=document.getElementById('dock_item_dialog_73209096').innerHTML;
                                  notificar('hubo un cambio');
                              }
                           },250);
});
</script>

</head>

<body>
<div class="chatDockDialogViewportFlow">
<ul id="dock_item_dialog_73209096">
<li class="me"><span class="sender">Eu</span>:&nbsp;hola</li>
<li class="separator"><hr></li>
<li class="received"><a id="dock_item_sender_link_65072267" href="javascript:void(0)" class="sender">Alba</a>:&nbsp;ola</li>
<li class="separator"><hr></li><li class="me"><span class="sender">Eu</span>:&nbsp;que tal</li>
<li>¿</li>
<li class="separator"><hr></li>
<li class="received"><a id="dock_item_sender_link_65072267" href="javascript:void(0)" class="sender">Alba</a>:&nbsp;bien</li>
<li>t?</li>
<li class="separator"><hr></li>
<li class="me"><span class="sender">Eu</span>:&nbsp;yo me voy chaoo</li><li>vengo en 1.5 min</li>
<li>o 2.33</li><li>nose</li><li>chao</li>
<li><img src="http://estaticosak1.tuenti.com//layout/web2-Zero/images/chat/6_emoticon_evilgrin.0497b628ba.png" alt=""></li>
<li class="info disconnected"><span>Fuches desconectado 21:31</span></li>
</ul>
</div>
<div onclick="document.getElementById('dock_item_dialog_73209096').innerHTML='<li>boo!</li>';">cambiar</div>
<div onclick="li=document.createElement('li');li.appendChild(document.createTextNode('hola!'));document.getElementById('dock_item_dialog_73209096').appendChild(li)">cambiar 2</div>
</body>
</html>

tomymolina · #8 (**permalink**) 25/06/2011, 02:09

Si, eso funciona. Pero en el chat no, no se que tecnología utiliza el chat para recibir el contenido y actualizarlo. De todos modos muchas gracias.

tomymolina · #9 (**permalink**) 09/07/2011, 15:39

No consegui implementarlo pero voy dar un dato que igual ayuda, se trata de un chat. Entonces al escribir algo en un textarea y presionar enter se modifica el contenido de la div en cuestion.