Actualizar automáticamente lista con Javascript

dnzmart · #1 (**permalink**) 29/06/2015, 15:35

Hola a todos,

Estoy trabajando en una chat con los emojis de emojione y mi intención es la siguiente:

Tengo una lista y una función

Código HTML:

<ul id="milista" onclick= "funcion1()">
	<li  id="milista1">:smile:</li>
	<li  id="milista2">:sm:</li>
	<li  id="milista3">:pr:</li>
</ul>

La funcion:

Código HTML:

unction funcion1() {
		var a = document.getElementById("milista").innerHTML;
       console.log(a);
		document.getElementById("milista").innerHTML = emojione.shortnameToImage(a);
		
		setTimeout(arguments.callee, 1);
		
	}

Evidentemente la lista se actualiza con el evento onclick, mi intención es que no exista la necesidad de darle click a esa lista para que aplique el filtro de emojione si no mas bien que lo haga en cuanto cargue la pagina. Que me recomiendan? Ah, y otra cuestión , si esta lista fuese dinámica como me aseguro que los elementos entrantes se les aplique también el filtro? Estoy realmente confundido.

Alexis88 · #2 (**permalink**) 29/06/2015, 16:50

Bienvenido a FDW.

Para asegurarte de que la función se ejecute al haber cargado la página, puedes delegarla a la carga del DOM, es decir, cuando se produzca el evento DOMContentLoaded.

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", funcion1, false);

También puedes delegarla a la carga de la ventana, es decir, cuando cargue la página y todo su contenido.

Código Javascript:

Ver originalwindow.addEventListener("load", funcion1, false);

O simplemente asignarla a la carga del cuerpo del documento:

Código HTML:

Ver original<body onload = "funcion1()">

Para lo segundo, podrías volver a ejecutar la función luego de insertar los nuevos elementos, pero en lugar de usar un id, te conviene usar una clase pues, a diferencia del id, sí puedes repetirlo. También puedes usar un observador de mutación para ejecutar la función cuando se inserten elementos en el documento.

Código Javascript:

Ver originalvar observador = new MutationObserver(function(mutations){
    if (mutations[0].addedNodes.length){
        funcion1();
    }
});
 
observador.observe(document.body, {
    childList: true
});

Saludos