refrescar diferentes divs con javascript y ajax

Escrita por , 20 August 2011

En un POST anterior les deje un tutorial de como refrescar un div tag sin necesidad de refrescar la pagina completa, bien en esta ocasión e pulido mejor el código y e creado una función que refresque cualquier cantidad de DIVs sin necesidad que se refresque la pagina completa..
Esto facilita el uso del código para cualquier circunstancia que nos enfrentemos al crear nuestra web..

ejemplo para como utilizar Ajax con una base de datos Mysql Maneja datos de Mysql con Ajax

Refrescando diferentes div tags usando javascript y ajax.

La función que usaremos se llama refreshDivs(divid , secs , url) , la función acepta 3 parámetros mandatarios:

  • divid = este es el ID del div que quieres refrescar.
  • secs = los segundo en que deseas que el div se refresque.
  • url = La dirección del documento que deseas que aparezca en el DIV.

El URL puede ser cualquier clase de documento, sea php, html, shtml etc ..

Ok ahora el paso a seguir es colocar en tu html entre los “<head>” tags el siguiente código abajo mostrado.

<script type="text/javascript" language="javascript">
function refreshDivs(divid,secs,url)
{

// define our vars
var divid,secs,url,fetch_unix_timestamp;

// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}

// Timestamp para evitar que se cachee el array GET

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
</script>

La parte del código donde indicamos que divs hay que refrescar es la siguiente:

window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}

Utilizando el evento window.onload hacemos que nuestro explorador corra la función y esta nos refresque los divs que deseamos que sean refrescado sin necesidad de recargar o refrescar la pagina completa..
Repite las funciones con diferentes div, tiempos y urls no hay limitaciones a la cantidad de veces que quieras usarla.

En nuestro ejemplo, usare documentos php, pero no es necesario puede ser cualquier clase de documentos mientra sean soportados por tu webserver o hosting service.

div1.php

div1.php sera un simple script que cambiara números al azar, como verán este es el documento llamado en la función arriba que es refreshDivs(‘div1′,5,’div1.php’).

Este documento sera llamado cada 5 segundos y se mostrara en el div1
Los otros dos ejemplos son similares a este primero, solo cambian el ID del DIV el tiempo en segundos y la url o la dirección del documento PHP.

<?php
echo "<p style=\"background-color:#FF7400\">Aqu&#237; obtendremos n&#250;meros al asar ".rand(1, 1000)."</p>";
?>

div2.php

div2.php repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() .

<?php
$veces = rand(1,20);

for($i= 0; $i <= $veces; $i++)
  {
	  echo "<p style=\"background-color:#356AA0\">".$i." Por favor repite me, ".$veces." veces.</p>";
  }
?>

div3.php

Es el mismo caso para el div3.php, repetirá las palabras “Por favor repite me” tantas veces como la variable $veces sea definida por la funcion rand() , con la única diferencia que el color de el fondo es diferente y la cantidad de segundos a refrescar…

<?php
$veces = rand(1,20);

for($i= 0; $i <= $veces; $i++)
  {
	  echo "<p style=\"background-color:#C79810\">".$i." Por favor repite me, ".$veces." veces.</p>";
  }
?>

Estos son simples ejemplos donde podrás observar como trabaja la función de la que hablamos..

Otros usos

No solo puedes refrescar con Ajax divs si no también otros html tags, como span , form, tablas, H, P y otros mas , tan solo tienes que definir un id para esa tag, una nota importante es que al documento que se llame debe correr o parsear el contenido en tu servidor, ya que el Ajax es en el Cliente osea tu explorador.

Si este documento es un archivo TXT y tiene código javascript es posible que tu explorador lo corra pero si es archivo TXT tiene código PHP, JSP o u otros no sera parseado por el Ajax, lo que pinteara en tu pagina es el código en si tal cual..

Veamos todo el código con el HTML:

<html>
<head>
<title>Ejemplos de como refrescar varios div tags usando javascript y ajax.</title>
<script language="Javascript" type="text/javascript">
function refreshDivs(divid,secs,url)
{

// define our vars
var divid,secs,url,fetch_unix_timestamp;

// Chequeamos que las variables no esten vacias..
if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;}
else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;}
else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;}
else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;}

// The XMLHttpRequest object

var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Tu explorador no soporta AJAX.");
return false;
}
}
}

// Timestamp para evitar que se cachee el array GET

fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}

var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;

// the ajax call
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
}

// LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar.
window.onload = function startrefresh(){
refreshDivs('div1',5,'div1.php');
refreshDivs('div2',3,'div2.php');
refreshDivs('div3',10,'div3.php');
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

Puedes ver los ejemplos funcionando dando click en Refrescar varios Divs tags con javascript y ajax.

La función esta completa pues chequea que los parámetros estén definidos si no lo están un javascript alert te advetira del problema y el script terminara su función..

Por favor si te a gustado el código deja tu mensaje, y si encuentras algún problema no temas en postear aquí mismo gracias por Leer..

Categorias : Ajax,Guias para la Web,php y algo mas,Un poco de html Etiquetas :

Comentarios
25 November 2012

Veras no tengo muchos conocimientos de programar pero me defiendo, he visto el código que has puesto y me gustaria utilizarlo para mi página que estoy haciendola en estos momentos.
Mi problema es que en la página web muestro dentro de un div varias fotos, para seleccionar las caracteristicas de las fotos que deseo ver utilizo un formulario para filtrar las mismas de una base de datos en dicho formulario tengo varios selects y varios checkbox hasta ahora cuando selecciono algo en ellos con el evento onchange recargo la misma página completamente lo que me provoca el correspondiente parpadeo, lo que necesito es que se actualicen las fotos del div segun lo seleccionado con el formulario de filtrar sin recargar toda la página, solo quiero recargar el nuevo contenido de ese div.
¿Como lo podria hacer?
¿Que cambios tengo que hacer en el código que has puesto?
Perdona mi ignorancia.
Un saludo y gracias.

Echo by Unexes
27 November 2012

Hola,

Si el código te serviría también lo que necesitas es mandar la información con el ajax a tu documento php o el que uses.. este debe darte un retorno con que se pasara a el div seleccionado en el script..

Ya que utilizas el evento onchange , al darle submit este te lo manda al documento php haciendo que se refresque la pagina completa.. envés de refrescar el documento manda el ajax call y en response obtienes el update para tu div..

Echo by UTAN
2 December 2012

Hola de nuevo, esto es algo diferente al tema, quisera si me pueden ayudar en esto… PASAR UNA VARIABLE A 2 PAGINAS CON UNA FUNCION AJAX… espero puedan ayudarme a encontrar la solucion..

Echo by Alexander
2 December 2012

Hola,

Si es posible usando Ajax.

puedes pasar un objecto en forma de Json a la pagina y tener como respuesta otro json y trabajar con ello..
Tendrías que explicar con detalle cual es el caso..

Echo by UTAN
21 December 2012

UTAN
Realmente agradecido por tu aporte al conocimiento de cómo ocupar Ajax.
Desde hace meses que estaba intentando hacer el refresco de unos Divs y no lograba hacerlo.

Gracias de nuevo

Echo by Rafa
21 December 2012

UTAN
Estoy tarbajando con un PLC al cual me comunico a través de ModBus y puedo obtener los valores de muchas variables.
Como puedo manejar esos valores para que el Cliente pueda refrescar en su pantalla los mismos valoes?? Puedes darme una mano con eso??
Desde ya gracias

Echo by Rafa
21 December 2012

Aunque no e trabajado con modbus, apenas i le di una búsqueda..

Si estas haciendo llamadas a un php por ejemplo y estas obteniendo los resultados con este, puedes pasarlo como json y trabajarlos en el lado del cliente..

De esta manera, trabajas algo asi.

if(response.var){
// as algo con este objeto
} 

agradezco tu comentario.

Echo by UTAN
22 December 2012

Gracias UTAN,
Investigaré acerca de JSON antes de seguir consultando.

Otro punto. MI idea es compartir la informacion obtenida del PLC en forma OnLine, por tanto debe ser lo más rápido posible su actualizacion, estoy hablando de 250 ms. Has usada memoria compartida con PhP? Podría ser esta una via a tener informacion de acceso mas rápido?

Saludos

Echo by Rafa
22 December 2012

No,

Para eso sugiero , push technology oh en su caso Node y socket.io en el cual puedes hacer un setTimeout() a un archivo que accede esta información y entonces la pase a los client en tiempo real..

Esa es la manera que lo aria, sin embargo si no tienes un vps o server tendrías que usas ajax el cual podrías tener delay si el client esta bajando algo algún archivo y su connection este siendo usada..

Echo by UTAN
18 February 2013

Me has salvado la vida.
estoy apunto de entregar mi proyecto y andava buscando esto, no acostumbro a comentar en los foros, pero esto si lo merece, en verdad que al verlo me sorprendio muchisimo, mis mas sinceras felicitaciones, sigue asi

Echo by Benjamin
9 March 2013

Quiero agradecerte compañero! Me ayudo mucho tu post! 😀 Sos una gran persona!

Para lo que necesites!

Echo by Sathya Sanlés
9 March 2013

Es un placer amigos..

Echo by UTAN
17 May 2013

Buenos días, he utilizado tu script y va de maravilla, hoy me tope con que la página que necesito imprimir en el div contiene javascript y ajax y no logro hacerlo funcionar, podrías ayudarme?

Echo by Raúl
17 May 2013

Bueno si lo que el callback del ajax request contiene javascript dever evaluarlo primero usando el metodo eval().

Pero ojo necesitas serciorarte que nadie puede injectar javascript en el archivo que llamas o pues aser un xss y esto no es bueno.

Echo by UTAN
20 May 2013

Gracias, pues he intentando de mil maneras y no lo he logrado, solo con jQuery. Gracias por tu atención..

Echo by Raúl
20 May 2013

Estoy probando el código para implementarlo en mi web…pero me gustaría saber si es posible al configurar en vez de mostrar en el div una pagina, actualizar un div de la misma pagina.

En mi web tengo por una parte el header.php (donde esta el menu principal) y el footer.php y luego las paginas con el contenido y en cada uno cargo el header y el footer.

Lo que quiero es en el contenido en unos div específicos que se actualicen pero no cargando una pagina sino actualizando su mismo contenido.

Gracias

Echo by mendizalea
20 May 2013

Si, esto debería de ayudarte..

Lo que no entiendo es porque no lo estas usando asi.. si en el header pones nueva información solo tienes que hacer un llamada ajax a un archivo con la nueva información y pasarla a un div en tu header..

Echo by UTAN
22 May 2013

Hola:
Tras mucho buscar encontré tu tutorial que me parece fantástico.
Pero… a mis 66 años y mis escasos conocimientos de PHP no consigo dar con la linea de código necesaria para cambiar la propiedad background-image en el fragmento div1.php de tu ejemplo… (<?php
echo "Aquí obtendremos números al asar “.rand(1, 1000).””;
?>)

para hacer que muestre una imagen (por ejemplo:img/n0.gif)
¿ Tendrias la mabilidád de pasarme un ejemplo ?

Gracias anticipadas

Echo by Teo
23 May 2013

Hola, con gusto ,
Bueno si quisieras esto al azar lo haría así.. en el folder donde están las imágenes las renombraria como imagen1.gif, imagen2.gif y así sucesivamente..

Ahora el metodo rand() acepta los parámetros empiezo y final.. entonces

<?php echo '<img src="imagen'.rand(1 , 10).'.gif" />'; ?>

No lo prove por errores peo mira si ese ejemplo te da una idea.

Pero el ejemplo printearia imágenes del 1 al 10 , y ya que las imágenes están renombradas debería funcionar correctamente.

Echo by UTAN
26 August 2013

Que tal..!!!

Me gusto mucho el tutorial, pero tengo un pequeño problema, cuando mando a traer los archivos.php, en uno de estos contiene una alert personalizada, y esta no me aparece, no se si me puedas Ayudar.

Echo by Jose Manuel Ramírez Calderón
Deja tu comentario

(requerido)

(requerido)