Tanto si desarrollas una aplicación web en la que se muestra una colección de datos dinámica, que se actualiza cada poco tiempo, como si quieres que el contenido de una parte de tu web se actualice o refresque periódicamente, aquí tienes una solución a tu problema utilizando jQuery.
En las antiguas webs, sobre todo en la de noticias o periódicos, cada cierto tiempo se refrescaba todo su contenido, actualizando la página completa. Para eso utilizamos el tag Meta refresh de HTML. Lo que hace es refrescar la página o frame cada cierto tiempo. Para ello, entre los tags <HEAD></HEAD> de la página incluíamos el siguiente código:
<meta http-equiv="refresh" content="5">
Lo que hace es refrescar todo el contenido de la página cada 5 segundos. Este comportamiento está desaconsejado por el World Wide Web Consortium (W3C) ya que puede desorientar al usuario.
Durante el desarrollo de una aplicación web, necesitábamos que una tabla de datos (utilizábamos displaytag, de la que ya os he hablado anteriormente) se actualizara cada cierto tiempo, definido por el usuario), debido a que el estado de los datos mostrados en esta displaytag tenían un comportamiento bastante dinámico y cambiante.
Para ello me creé en la página un div con id salastatus y éste contenía otro div con id resulttable que contenía la displaytag y algún control más que deseaba actualizar, a continuación introduje el siguiente código que se ejecuta tras la carga de la página:
$(document).ready(function(){
var refreshId = setInterval(refrescarTablaEstadoSala, 30000);
$.ajaxSetup({ cache: false });
});
Lo que hace el código es, cada 30 segundos (el valor del parámetro va en milisegundos), se ejecuta la función javascript refrescarTablaEstadoSala. Comentaros que aquí para simplificar he indicado el número de milisegundos de forma directa, pero realmente lo enviaba el servidor, a partir de los datos de configuración del usuario.
A continuación muestro el contenido de la función refrescarTablaEstadoSala:
function refrescarTablaEstadoSala() {
$("#rolling").toggle();
$("#salastatus").css('opacity', 0.4);
$("#salastatus").load('estadoSala.do?randval='+ Math.random() + " #resulttable", function(){
//aquí puedes meter más código si necesitas;
$("#salastatus").css('opacity', 1);
$("#rolling").toggle();
});
}
Lo primero que hago es mostrar un icono de cargando cuyo id es «rolling» ( $(«#rolling»).toggle(); ) y pongo la capa que quiero actualizar transparente ( $(«salastatus»).css(‘opacity’, 0.4); ), totalmente operativa, pero el usuario ya detecta que ha comenzado una actualización. A continuación mediante el método load, de la que ya os hablé en esta publicación anterior, realizo una petición de la página con un número aleatorio como parámetro (para que el navegador no me devuelva la página de caché) seguido de un espacio y el div que quiero cargar en salastatus precedido de un #. Tras la carga, oculto el icono cargando y quito la transparecia a la capa. Antes de esto puedes completar la función con el código que necesites o el tratamiento de errores que desees.
No olvides incluir el enlace al fichero js de jquery o no te funcionará. Cómo ves una solución bastante elegante de resolver el problema ocasionado con el meta refresh y su manera, mucho más intrusiva de refrescar la página.
12 respuestas a “Refresco Automático de un Div Cada X Segundos con jQuery”
Genial muchisimas gracias
Donde puedo ver el ejemplo en accion??
Hola Daniel,
Desgraciadamente el ejemplo en el que me baso para escribir el post se encuentra inaccesible por estar dentro de una intranet. Puedes ver un sencillo ejemplo que hice en esta dirección:
http://joseantoniosaiz.es/samples/ejemloRefreshDiv/refresco.html
Esta página se compone de dos capas, una que muestra la hora en la que se cargó la página y la otra muestra también la hora actual pero se va refrescando cada segundo (puedes ver el código fuente de la página). En el caso que presento en el post hago lo mismo pero en vez de actualizar la hora, hago una llamada ajax al servidor, el cual me sirve el código html de una tabla con los datos actualizados cada 30 seg.
Espero que haya sido de ayuda.
Gracias por visitar el blog.
Que pasa si quiero que lo haga cada 5 segundos y en la funcion coloco una peticion ajax para obtener una lista de pedidos que hacen usuarios, entonces me estara haciendo una peticion cada 5 segundos eso no alentaria la pagina?
porque no pusiste el script completo para descargar de una vez??
Hola me sirvió mucho Gracias, pero se va a estar ejecutando todo el tiempo, como le dices que solo actualice cada x segundos pero solo por un determinado tiempo, es decir que se actualice cada 5 segundos pero solo por 1 hora.
Buen día, disculpa el parametro estadoSala.do que se encuentra en el load, a que se refiere o para que sirve no entiendo que dato lleva ahi
Hola Gerardo,
Ese parámetro se refiere a la URL del recurso que tú quieres refrescar. Si tu recurso es la página principal del New York Times, pondrás la URL de la misma. El que aparece en el ejemplo es una url definida en una aplicación implementada por mí.
Un saludo
Miles de gracias, anduve buscando esto por mucho tiempo…. De verdad muy útil!
hola buen dia, viendo tu codigo tengo una duda, como le puedo hacer para que en el metodo load no se mande una pagina, sino que se actualize solo un textarea en tiempo determinado.?
algo asi: $(«#salastatus»).load();
y si lo quiero cambiar cada dia a la media noche como seria , ya que si lo doy cada x lapso de tiempo , tira la pagina , por el hosting donde esta.
buen dia. tengo una inquietud y es saber si se puede programar un evento en js para que se ejecute solo cada x cantidad de tiempo aun si no se esta utilizando la pagina web