Frecuentemente a la hora de programar necesitamos refrescar y cargar contenido en una capa y que ejecute un fichero cada x segundos. Esta práctica es muy útil en chats, blogs, e-commerce, cms, etc … El siguiente ejemplo actualiza el contenido de una capa cada 10 segundos y carga en ella el contenido del fichero que le indiquemos. El efecto de fundido usando fadeOut y fadeIn es para darle más dinamismo al script.
<script>
function actualizar(){
$('#capa').fadeOut("slow").load('fichero.php').fadeIn("slow");
}
setInterval( "actualizar()", 10000 );
</script>
<div id="capa"></div>
click aquí para ver una pequeña demostración.
Tenéis más documentación de los métodos y funciones usados en el ejemplo a continuación. Haz click en los enlaces para obtener más información:
- .load() es el método de JQuery usado para cargar los datos desde servidor y la cual nos retornará los resultados en formato HTML.
- fadeOut() es un método de jQuery para ocultar elementos usando transparencias.
- fadeIn() es un método de jQuery para mostrar elementos usando transparencias.
- setInterval es una función JavaScript que nos permitirá ejecutar una función cada X segundos que le indiquemos.
