Home Programacion jQuery Función: Actualizar automaticamente un DIV (jQuery)

Función: Actualizar automaticamente un DIV (jQuery)

Posteado en jQuery, Programacion el Domingo, 16 de enero de 2011 a las 11:47 3 Comentarios

Actualizando un poco mi articulo anterior: “jQuery – Actualizar automaticamente un DIV”, que escribiera hace más de un año, les traigo una funcion que puede servir para no escribir tantas veces el mismo código.


CargarDiv = function (objetivo, url)
 {$(document).ready(function() {$(objetivo).load(url+"?" + (new Date()).getTime());});}

Como podran ver, es una función muy simple la cual nos permite reutilizar el codigo para diversos usos. Añade luego de la url un  “?+numero_al_azar” para evitar la cache de los resultados. [Linea 2]

El mismo podemos utilizarlo asi:

<html>
<head>
<!-- Por comodidad uso la libreria de jQuery desde Google. Si lo prefieren pueden usar la libreria alojada localmente. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
//Definimos la funcion
CargarDiv = function (objetivo, url)
 {$(document).ready(function() {$(objetivo).load(url+"?" + (new Date()).getTime());});}

//La llamamos pasando parametros. Primero el ID del DIV a actualizar, y luego la URL desde la cual actualizamos.
CargarDiv("#reciberespuesta", "http://www.dominio.com/resultados.php");

// Si es necesario que recargue cada cierto tiempo podemos usar setInterval
setInterval('CargarDiv("#reciberespuesta", "http://www.dominio.com/resultados.php")', 10000);
</script>
</head>

<body>
<div id="reciberespuesta"></div>
</body>
</html>

En este caso primero cargamos el div apenas la página esta lista, y luego definimos un tiempo de recarga con setInterval en milisegundos, en mi caso use el valor 10000 (10 segundos). ¿Por qué hacemos dos llamadas? Porque si solo usaramos setInterval y no lo llamaramos primero nosotros, luego de cargar la página deberiamos esperar – en este caso – 10 segundos para verlo “por primera vez” en nuestra página.



3 Comentarios en “Función: Actualizar automaticamente un DIV (jQuery)”

  1. Dario dice:

    Hola como estas Muy bueno tu articulo me sirvio de mucho
    Muchas gracias por compartir;
    Estoy empezando con jquery y a partir de tu codigo , quise implementarle que cuando este actualizando la pagina php , muestre un texto de actualizacion durante algunos segundos pero no hubo caso
    agregue estas lineas show(“slow”).load(‘ejecutar_coti.php?valoralazar=’+ Math.random()).hide(“slow”);;
    lo que no se ,es hacer que dure unos segundos el texto que le inclui en el script php
    saludos

  2. Karina dice:

    Como agregaría el fade in y el fade out en este caso?

Dejar una respuesta