refrescar diferentes divs con javascript y ajax
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..
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){
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í obtendremos nú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..
Con esto podrás refrescar varios div tag , sin necesidad de refrescar o recargar la pagina completa..
No hay limitaciones en cuantas veces quieras utilizar la función solo repite la función con diferentes div ids, segundos y urls o documentos a llamar.
Veamos todo el código con el HTML:
<html>
<head>
<title>Ejemplos de como refrescar varios div tags usando javascript y ajax.</title>
<script>
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){
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..
En nombre de muchos que solo pasan y miran, pero no comentan, te quiero agradecer porque me has ayudado muchisimo. Sos un fenómeno!! Saludos
Hola,
Te lo agradezco sinceramente.
mis gracias.
Muy buen tutoria, felicidades.
Una sola pregunta, cuando lo implemento, los div se actualizan a los x segundos, pero mientras pasa esos primeros segundos, los div estan vacio.
Esto es asi, o he hecho algo mal?
Hola,
Gracias por tu comentario, en mis pruebas y en la pagina de ejemplo, el script funciono instantáneamente es posible que tengas mucho markup en tu pagina.. digo esto puesto el evento window.onload espera que la pagina este absolutamente cargada esto se incluye las foto y demás imágenes que puedas tener..
Un enlace a tu tu trabajo seria lo mejor para ver el código.
gracias amigo.
Hey gracias por el aporte, aun estoy aprendiendo programacion web, probare el codigo y estare posteando como me ha ido :]
Hola,
Gracias vani por tu comentario..
estaré al pendiente.
Tremendo. Lo estoy probando en mi pagina y funciona.
Un pregunta, sería posible pasar variables a los php que se ejecutan en cada div? Como lo podría hacer?
mil gracias de verdad
Hola,
Gusto que te funcione, mira PHP es programación server side y Javascript es client side..
Por esa razón Javascript no puede pasarle variables a PHP , pero si en viceversa…
Si te pones a pensar imagínate alguien corriendo un Xss en Javascript y que la variable de PHP lo ejecutase..
Seria destructivo..
gracias por comentar.
Tienes razón. Ya lo he montado para que no me haga falta pasar variables, siplemente duplicando un poco de código.
Funciona de fábula!
y para aplicar recargar difentes contenidos en un solo div, un ejemplo que cuando pulses un link te muestre un contenido en el DIV1 y que cuando pulse otro link te muestre otro contenido en el mismo DIV1, pero eliminando el contenido anterior?¿
Hola,
digamos que tienes el documento tal, documento1.php y documento2.php tienes la pagina central y lo quieres usar:
entonces creas los enlaces asi:
<html> <head> <script type="text/javascript" language="javascript"> // creamos esta variable con global scope var timeout = ''; 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;} if(timeout)clearTimeout(timeout); // limpiamos el request que se aya echo previamente. // 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){ document.getElementById(divid).innerHTML=xmlHttp.responseText; timeout = setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000); } } xmlHttp.open("GET",nocacheurl,true); xmlHttp.send(null); } </script> </head> <body> <a href="#" Onclick="refreshDivs('div1',10,'documento1.html');return;"/>Cliquea para mostrar el documento1</a> <br /> <a href="#" Onclick="refreshDivs('div1',10,'documento2.html');return;"/>Cliquea para mostrar el documento2</a> <div id="div1"> </div> <br /> <div id="div2"> </div> </body> </html>Al presionar el enlace para mostrar el documento1 ara la llamada ajax a el documento1.php y lo mostrara en el div1, si presionas el enlace al documento2 este mostrara el siguiente borrando todo lo que había en el div previamente y terminando el request previamente echo, para hasi no tener llamadas paralelas recursivamente
espero te sirva
UTAN.
Gracias amigo!!!!
Muy bueno, justo lo que estaba buscando para terminar mi chatsaludos.
muy buneo, justo lo que estaba buscando
Me ha funcionado. Perfecto.
Gracias
Hola, muchas gracias por este tutorial, me ha servido para plantear lo que quiero hacer, pero ahora mismo me surge una duda y es la siguiente; tengo un arrays de feeds RSS y quiero que el div se vaya actualizando con los titulares, para ello quiero recorrer este array. He pensado hacerlo con una variable de session que contabilice el número de veces que se ha refresacado el div pero parece que no funciona, alguna idea de cómo saber el número de veces que se ha refrescado el div?? Muchas gracias de nuevo
Bueno,
mi idea seria que actualizes tu array con los ultimos feed a el empiezo de este y despues haces un loop en el array digamos con un numero digamos de 10 , este recirrera el array hasta 10 indices y con el ajax solo haces el request, mientras actualized el array y pongas lo mas nuevo al principio deberia de funcionar..
gracias por tu comentario.