Actualizar 2 div con ajax

fallenagus · #1 (**permalink**) 29/01/2009, 16:30

buenas a todos espero que me puedan ayudar, tengo el sgte problema:

tengo una pagina donde necesito recargar 2 div al mismo tiempo con el contenido de dos paginas distintas. el código ajax que utilizo es el sgte:

Código javascript:

Ver originalfunction objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
function MostrarConsulta(datos,res){
    divResultado = document.getElementById(res);
    ajax=objetoAjax();
    ajax.open("GET", datos);
    ajax.onreadystatechange=function() {
        if (ajax.readyState==4) {
            divResultado.innerHTML = ajax.responseText
        }
    }
    ajax.send(null)
}

y este es mi html :

Código HTML:

<body>
	<div id="contenido" align="center">
		<a href="#*" onClick="MostrarConsulta("hoja1.html",contenido);">Cualquier Texto</a>
	</div>
	<div id="contenido2" align="center">
		<br><br><h1>Cualquier Otro Texto</h1>
	</div>
</body>

porfavoooor si alguien me da una mano, se los agradeceré.

SetheR · #2 (**permalink**) 29/01/2009, 17:01

Bueno, como no especificas en donde lo quieres recargar, voy a suponer que lo quieres en el div contenido2. Prueba con esto:

Código:

<body>
	<div id="contenido" align="center">
		<a href="javascript:MostrarConsulta("hoja2.html",contenido2);" onclick="javascript:MostrarConsulta("hoja1.html",contenido); ">Cualquier Texto</a>
	</div>
	<div id="contenido2" align="center">
		<br><br><h1>Cualquier Otro Texto</h1>
	</div>
</body>

Por ejemplo, es algo chapucero, pero funciona. Tambien podrías intentarlo con un setTimeOut o con el evento on doubleclick..

Saludos

fallenagus · #3 (**permalink**) 29/01/2009, 17:17

SetheR, creí que me explicaba con el nombre del tema, lo siento.

lo que yo necesito es recargar los dos div pero al mismo tiempo y con dos diferentes paginas, osea al hacer click en el link que aparece. me gustaría modificar la función MostrarConsulta() para que reciba el nombre de los dos div y que me los actualice con el contenido que hay en dos paginas.

he intentado declararme otra función y desde esa llamar dos veces al MostrarConsulta() pero no funciona bien.

SetheR · #4 (**permalink**) 29/01/2009, 17:39

No se, eso que te pase actualiza dos divs, con dos archivos html diferentes..Si lo quieres hacer con fuciones supongo que es mas engorroso.

Código:

function recargarDosDivs(pag1, div1, pag2, div2){
  MostrarConsulta(pag1,div1);
  MostrarConsulta(pag2,div2);
}

Y en el html:

<a href="javascript:void(0);" onclick="javascript:recargarDosDivs('hoja1.htm','div1','hoja2.htm','div2');">link</a>

Ni idea si funciona o no...pero por probar cosas no se pierde nada..

fallenagus · #5 (**permalink**) 30/01/2009, 07:54

buenas mira SetheR ya probé con esa macana lo había echo antes. por que a mi no me gusta preguntar hasta que me quede sin la solución después de probar mucho.

El problema que he visto, de hacer eso que pusiste arriba, es que lo hace cuando se le antoja, a veces si a veces no, no se si por que esta haciendo dos llamadas al servidor al mismo tiempo y esta ocupando la misma función o el mismo objeto XMLHTTP, pero también probé declarando dos objetos XMLHTTP pero = lo hace cuando se le da la regalada gana.

. bueno es que recién estoy empezando con esto del Ajax, haber si se podrá resolver esto

sjam7 · #6 (**permalink**) 31/01/2009, 22:33

yo creo que soy de los mas novatos en ajax pero estoy comenzando a usarlo y me encanto, mi respuesta seria una pregunta, no funcionaria asi?:

function MostrarConsulta(datos,res, datos2, res2){
divResultado = document.getElementById(res);
divResultado2 = document.getElementById(res2);
ajax=objetoAjax();

ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
}
}
ajax.send(null)

ajax.open("GET", datos2);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado2.innerHTML = ajax.responseText
}
}
ajax.send(null)

}

Esto seria una solucion para algo que necesito y no he podido probar

karoljose · #7 (**permalink**) 31/01/2009, 23:09

Hola fallenagus, puedes hacer una sola llamada con ajax y distribuir las respuestas en cuantos div quieras. Solo tienes que trabajar con JSON, con ellos recibes la respuesta particionada: por ejemplo:

Código PHP:

  //Esto es PHP 
//Esta respuestas la armas con PHP a pie si quieres,  
//tambien hay librerias, lo importante es enviar la  
//respuesta en este formato 
[{  
   "respuesta_ajax_div1": "Contenido del div 1", 
   "respuesta_ajax_div2": "Contenido del div 2", 
   "respuesta_ajax_div3": "Contenido del div 3" 
}]

Código:

//Esto es JavaScript
//Este eval es el que hace la magia, convierte 
//la respuesta en un objeto del lado del cliente,
//al que puedes acceder a la informacion haciendo
//referencia a los metodos.
respuesta=eval(ajax.responseText);
respuesta=respuesta[0];
document.getElementById(divResultado1).innerHTML=respuesta.respuesta_ajax_div1;
document.getElementById(divResultado2).innerHTML=respuesta.respuesta_ajax_div2;
document.getElementById(divResultado3).innerHTML=respuesta.respuesta_ajax_div3;

Suerte, espero que te sirva...

fallenagus · #8 (**permalink**) 02/02/2009, 13:06

karoljose hhhmmm lo que me estas escribiendo lo veo muy interesante, pero vas a disculpar mi ignorancia, como haria yo para decirle al objeto ajax cuando este haciendo el .open, que me tiene abrir 2 paginas distintas ???.
de nuevo perdon por la ignorancia.

sjam7 viejo ya en el comentario que esta antes de tu respuesta explique por que eso no me sirvió, pero bueno = se te agradece viejo.

jodlinh · #9 (**permalink**) 02/02/2009, 13:45

Hola, espero que sirva de algo mi opinión y si no es así pues seguiremos aprendiendo de todo lo que leemos por aquí..

si quieres que se actualicen 2 div al mismo tiempo, porque no hace que recargue 1 primero, y al finalizar inmediatamente cargue el otro?.

explicome:

Código:

function MostrarConsulta(datos,res){
    divResultado = document.getElementById(res);
    ajax=objetoAjax();
    ajax.open("GET", datos);
    ajax.onreadystatechange=function() {
          if (ajax.readyState==4) {
             divResultado.innerHTML = ajax.responseText

            ***AQUI HACER NUEVAMENTE LA LLAMADA PARA QUE ACTUALICE EL OTRO DIV***

            ajax.open("GET", datos);
            ajax.onreadystatechange=function() {
                 if (ajax.readyState==4) {
                     divResultado.innerHTML = ajax.responseText
                 }
            }
        }
    }
    ajax.send(null)
}

Claro, eso es solo una idea en general, tendrías que modificar las variables y otras cosas que falten.

fallenagus · #10 (**permalink**) 02/02/2009, 13:58

jodlinh tengo que responderte lo mismo que a sjam7.

lo he intentado todo con un objeto ajax con dos, la cosa es que lo hace cuando se le da la gana. hasta he puesto en la primera llamada:

ajax.open("GET", datos, false)

para que la primera la haga sincronamente y la segunda:

ajax.open("GET", datos, true)

pero eso solo me funciono en el Chrome, en firefox y en explorer no funciona.
lo que respondio karoljose me perece la posible solución. pero espero que me diga como hacer el .open() con dos paginas distintas

karoljose · #11 (**permalink**) 03/02/2009, 16:28

Muy facil puedes resolver eso...

Esas paginas a las que llamas estan dentro de tu propio Web? Si es asi, solo debes llamar a una pagina, y que ella a su vez haga 2 include de las paginas y ya.

Código PHP:

  print (' [{  "respuesta_ajax_div1": \' '); //nombre del contenido 1 
include($_REQUEST['pagina1']); //include de la primera pagina 
print(' \',  "respuesta_ajax_div2": \' '); //nombre del contenido 2 
include($_REQUEST['pagina2']); //include de la segunda pagina 
print(' \' }] '); //cierras el formato JSON

Deberia quedar algo asi:

Código PHP:

  $respuesta=' [{   
"respuesta_ajax_div1": \' CONTENIDO PAGINA 1 \',   
"respuesta_ajax_div2": \' CONTENIDO PAGINA 2 \' 
}] ';

Esto de es un ejemplo como debe quedar, no tienes que guardar nada en ninguna variable, porque con los print del codigo de arriba ya el manda eso al ajax.

Solo una cosa debes saber, las paginas no deben tener saltos de linea, porque sino el JSON no lo entiende, creo que hay librerias para eso, osea que la pagina que llamas debe ser algo como esto:

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Documento sin t&iacute;tulo</title></head><body>hola mundo</body></html>

Como vez todo debe estar seguido sin saltos de linea, de todas maneras por hay debe haber librerias para eliminar los saltos de linea.

De todas maneras si quieres dime exactamente si las paginas estan en tu Web o no, y otra porque no unificas las paginas, y pones todo el contenido en una sola pagina y te evitas hacer los includes.

Saludos...

tavomestra22 · #12 (**permalink**) 03/11/2010, 21:38

hola... ahora revisando esto tengo un problema parecido.... pero necesito mas infomacion de como resolverlo.... lo q quiero hacer es cargar los input de un formulario con los datos de la bd...y creo q ajax es la solucion segun vi.... lo q kiero es q al presionar un boton me carge los datos en ciertos campos de texto.... y quiero saber si asi de la manera q pieso es correcto....

en PHP
$respuesta=' [{
"respuesta_ajax_div1": "$dato1", // aqui puedo pasar variables de la bd???
"respuesta_ajax_div2": "$dato2",
"respuesta_ajax_div3": "$dato3"
}] ';

en ajax

respuesta=eval(ajax.responseText);
respuesta=respuesta[0]; // esto q hace???
document.getElementById(campoTexto1).innerHTML=res puesta.respuesta_ajax_div1;
document.getElementById(campoTexto2).innerHTML=res puesta.respuesta_ajax_div2;
document.getElementById(campoTexto3).innerHTML=res puesta.respuesta_ajax_div3;

eso funciona????

si podria mostrar los datos en los campos sin nesecidad de regargar la pag, solo con el evento de un boton?????

elmouse19 · #13 (**permalink**) 18/01/2011, 21:43

karoljose Yo quiero hacer esto de divir el contenido de la pagina en 2 divs, ya que una parte de la pagina es cavecera y la otra el contenido, pero no termino de entender como adaptar mi codigo ajax, al o que ya has posteado para divirlo.

Mi codigo ajax es este:

Código Javascript:

Ver originalvar Conexion=false; // Variable que manipula la conexion.
 
// funcion que realiza la conexion con el objeto XMLHTTP...
function Conectar()
{
    if(window.XMLHttpRequest)
        Conexion=new XMLHttpRequest(); //mozilla
    else if(window.ActiveXObject)
        Conexion=new ActiveXObject("Microsoft.XMLHTTP"); //microsoft
}
 
function Contenido(idContenido)
{
    /* readyState devuelve el estado de la conexion. puede valer:
     *  0- No inicializado (Es el valor inicial de readyState)
     *  1- Abierto (El método "open" ha tenido éxito)
     *  2- Enviado (Se ha completado la solicitud pero ningun dato ha sido recibido todavía)
     *  3- Recibiendo
     *  4- Respuesta completa (Todos los datos han sido recibidos)
     */
 
    // En espera del valor 4
    if(Conexion.readyState!=4) return;
    /* status: contiene un codigo enviado por el servidor
     *  200-Completado con éxito
     *  404-No se encontró URL
     *  414-Los valores pasados por GET superan los 512
     * statusText: contiene el texto del estado
     */
    if(Conexion.status==200) // Si conexion HTTP es buena !!!
    {
        /* Modificamos el identificador temp con el valor recibido por la consulta
         *  Podemos recibir diferentes tipos de datos:
         *  responseText-Datos devueltos por el servidor en formato cadena
         *  responseXML-Datos devueltos por el servidor en forma de documento XML
         */
        document.getElementById(idContenido).innerHTML=Conexion.responseText;
    }else{
        document.getElementById(idContenido).innerHTML=Conexion.status+"-"+Conexion.statusText;
    }
    
    Conexion=false;
}
 
function Solicitud(Servidor,idContenido)
{
    // Si ya esta conectado, cancela la solicitud en espera de que termine
    if(Conexion) return; // Previene uso repetido del boton.
    
    // Realiza la conexion
    Conectar();
    
    // Si la conexion es correcta...
    if(Conexion)
    {
        /* Preparamos una conexion con el servidor:
         *  POST|GET - determina como se envian los datos al servidor
         *  true - No sincronizado. Ello significa que la página WEB no es interferida en su funcionamiento
         *  por la respuesta del servidor. El usuario puede continuar usando la página mientras el servidor
         *  retorna una respuesta que la actualizará, usualmente, en forma parcial.
         *  false - Sincronizado */
        Conexion.open("GET",Servidor,true);
 
        // Cada vez que el estado de la conexión (readyState) cambie se ejecutara el contenido de esta "funcion()"
        Conexion.onreadystatechange=function()
        {
            Contenido(idContenido);
        }
        
        /* Realiza la solicitud al servidor. Puede enviar una cadena de caracteres, o un objeto del tipo XML
         * Si no deseamos enviar ningun valor, enviamos null */
        Conexion.send(null);
    }else
        document.getElementById(idContenido).innerHTML="No disponible";
}
 
window.onload=function()
{
    Solicitud("seccion/home.html","pagina"); // Inicializamos con la primera pagina
}

ivancollado · #14 (**permalink**) 28/03/2012, 21:29

soy novato en ajax pero lo puedes hacer as como decia el colega arriba
function MostrarConsulta(datos,res){
divResultado = document.getElementById(res);
ajax=objetoAjax();
ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText

***AQUI HACER NUEVAMENTE LA LLAMADA PARA QUE ACTUALICE EL OTRO DIV***

ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
}
}
}
}
ajax.send(null)
}

pero tienes que crear distintos objetois
ajax=objetoAjax();
ajax2=objetoAjax(); y enviar al final de todo
ajax.send(null)
ajax2.send(null)

saludos

itza3985 · #15 (**permalink**) 15/07/2012, 14:10

saludos. yo tengo una pregunta que no se si vaya aca pero es de cierta manera parecido a la interrogacion de fallenagus.
bueno kiero saber si hay alguna manera de que dos objetos se sincronicen, es decir si muevo un objeto en una pagina se mueva tambien en la otra pero que aparte de eso se pueda hacer con dos dispositivos distintos, es decir de dos laptop distintas o lo que sea que se conecte a la pagina.
no c si me explique pero me ayudaria muxo sus respuestas, ideas y comentarios
gracias