Foros del Web » Programando para Internet » Javascript »

Actualizar automáticamente lista con Javascript

Estas en el tema de Actualizar automáticamente lista con Javascript en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 29/06/2015, 15:35
 
Fecha de Ingreso: junio-2015
Mensajes: 2
Antigüedad: 8 años, 8 meses
Puntos: 0
Actualizar automáticamente lista con Javascript

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.
  #2 (permalink)  
Antiguo 29/06/2015, 16:50
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Actualizar automáticamente lista con Javascript

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 original
  1. document.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 original
  1. window.addEventListener("load", funcion1, false);

O simplemente asignarla a la carga del cuerpo del documento:

Código HTML:
Ver original
  1. <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 original
  1. var observador = new MutationObserver(function(mutations){
  2.     if (mutations[0].addedNodes.length){
  3.         funcion1();
  4.     }
  5. });
  6.  
  7. observador.observe(document.body, {
  8.     childList: true
  9. });

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 29/06/2015 a las 20:06 Razón: Observador de mutación

Etiquetas: funcion, html, lista
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:58.