refrescar varios divs cada "x" segundos

memoadian · #1 (**permalink**) 21/03/2011, 00:28

Hola amigos, les cuento el viernes me puse a estudiar javascript, ayer DHTML, hoy AJAX XD, por lo mismo verán que no soy ni por mucho muy ducho en este tema, pero por lo menos lo medio leo, me encontre un código que refresca un div cada x segundos. el mismo lo pueden ver en esta web.

http://vcomputadoras.com/usa-ajax-pa...omment-page-1/

excelente codigo la verdad funciona perfecto.

pero mi necesidad consiste en refrescar 3 divs al unisono

he querido modificar dicho código de esta forma

Código Javascript:

Ver original// Timestamp for preventing IE caching the GET request
    var fetch_unix_timestamp ="";// lets declare the variable
 
    fetch_unix_timestamp = function()
    {
        return parseInt(new Date().getTime().toString().substring(0, 10))
    }
 
    var timestamp = fetch_unix_timestamp();
    var nocacheurl = url+"?t="+timestamp;
    var nocacheurl2 = url2+"?t="+timestamp;
    var nocacheurl3 = url3+"?t="+timestamp;
    var nocacheurl4 = url4+"?t="+timestamp;
 
// The code...
 
    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            document.getElementById(divid).innerHTML=xmlHttp.responseText;
            document.getElementById(divid2).innerHTML=xmlHttp.responseText;
            document.getElementById(divid3).innerHTML=xmlHttp.responseText;
            document.getElementById(divid4).innerHTML=xmlHttp.responseText;
            setTimeout('refreshdiv()',seconds*1000);
        }
    }
    xmlHttp.open("GET",nocacheurl,true);
    xmlHttp.send(null); 
    xmlHttp.open("GET",nocacheurl3,true);
    xmlHttp.send(null); 
    xmlHttp.open("GET",nocacheurl4,true);
    xmlHttp.send(null); 
    xmlHttp.open("GET",nocacheurl2,true);   
    xmlHttp.send(null);
}

entiendo que la primera parte del codigo original solo genera la llamada, y esta parte que yo he movido siguiendo mi lógica es la que afecta los divs de mi web
pero al hacer esto solo se actualiza el timediv2, pues depende del orden que ponga esto

xmlHttp.open("GET",nocacheurl2,true);
xmlHttp.send(null);

si pongo al final el 4 solo se actualiza el 4 y asi, ¿alguien puede ayudarme con esto?

y explicarme un poco mi error es que aun estoy demasiado verde en esta tecnologia

gracias :D

masterpuppet · #2 (**permalink**) 21/03/2011, 04:25

Que tal memoadian,

Si lo miras con firebug te vas a dar cuenta de lo que sucede, estas sobreecribiendo el request, en realidad en tu caso precisas 1 objeto xmlhttprequest por peticion, deberias separar la creacion del objeto del updater, podria ser algo asi:

index.html

Código HTML:

Ver original<html>
<title>Refresca un div tag sin necesidad de refrescar toda la pagina</title>
<head>
    <script src="ajax.js"></script>
</head>
<body>
    <div id="contenido">
        <h3>Refrescar div's tag con Ajax</h3>
        <div id="timediv">
        </div>
        <div  id="timediv2">
        </div>
        <div id="timediv3">
        </div>
        <div id="timediv4">
        </div>
    </div>
</body>
</html>

tiempo.php

Código PHP:

Ver original// Formateamos la salida de la variable.
 
$str = "It is %a on %b %d, %Y, %X - Time zone: %Z";
 
// Printeamos el resultado
 
echo (gmstrftime($str,time()));

ajax.js

Código Javascript:

Ver originalfunction newXMLHttpRequest(){
    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;
            }
        }
    }
    return xmlHttp;
}
 
var requests = {}
 
function refreshdiv(url, container, seconds){
    
    if(!requests[container]) requests[container] = newXMLHttpRequest();
    var xmlHttp = requests[container];
    // Timestamp for preventing IE caching the GET request
    var fetch_unix_timestamp = '';// lets declare the variable
 
    fetch_unix_timestamp = function() {
        return parseInt(new Date().getTime().toString().substring(0, 10))
    }
 
    var timestamp = fetch_unix_timestamp();
    var nocacheurl = url + '?t=' + timestamp;
    
    xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState==4){
            document.getElementById(container).innerHTML = container + '::' + xmlHttp.responseText;
            setTimeout(function(){refreshdiv(url, container, seconds)}, seconds * 1000);
        }
    }
    xmlHttp.open('GET', nocacheurl, true);
    xmlHttp.send(null); 
}
 
 
window.onload = function startrefresh(){
    refreshdiv('tiempo.php', 'timediv', 1);
    refreshdiv('tiempo.php', 'timediv2', 3);
    refreshdiv('tiempo.php', 'timediv3', 5);
    refreshdiv('tiempo.php', 'timediv4', 8);
}

lo que deberias hacer es cambiar las opciones en refreshdiv por las correspondientes a tus 4 peticiones.

Saludos.

memoadian · #3 (**permalink**) 21/03/2011, 04:54

Eres un master

no se por que no lo pensé, si uno trabaja solo la conexion, entonces separar en otra funcion, el refresh, y con parametros. que burro, pero bueno apenas lo estaba desenredando, mi otra solucion medio hecha era un while que generara una funcion incrementable, que funcionaba, pero era un codigo muy mediocre, gracias amigo.

+karma

mimis_grande20 · #4 (**permalink**) 10/06/2013, 14:54

me pueden ayudar.... necesito que cada div se actualice con una consulta diferente, como puedo hacer eso..??? de verdad necesito ayuda no tengo idea de como hacerlo