Loader mientras consulto datos....

bacdavi · #1 (**permalink**) 06/10/2009, 12:22

hola amigos!

He realizado un mi script para realizar una consulta a la base de datos a traves de un archivo *.php, y todo funciona a la perfección.

Perooo...

Necesito que mientras estoy consultado los datos en la BD que me muestre un loader.

les dejo mi codigo a ver si me pueden ayudar!

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.::Envio de datos ajax::.</title>
<script language="JavaScript" type="text/javascript">
function display_data(mid,terminal) { 
    xmlhttp=GetXmlHttpObject();
    if (xmlhttp==null) {
        alert ("Su navegador no soporta AJAX, Por favor utilice una version mas reciente del navegador");
        return;
    } 
    mid=document.getElementById(mid).value;
    ter=document.getElementById(terminal).value;    
    var url="process.php";
    url=url+"?mid="+mid+"&terminal="+ter;
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
            document.getElementById('resultado').innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send(null);
   return false;
}
function GetXmlHttpObject() {
    var xmlhttp=null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
    }
    catch (e) {
        // Internet Explorer
        try {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e) {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlhttp;
}
</script>
</head>
 
<body>
<form onSubmit="return display_data('mid','terminal')">
<table style="width: 50%; text-align: left; margin-left: auto; margin-right: auto;" border="0" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>Afiliación:</td>
      <td><input type="text" name="TXTmid" id="mid"/></td>
    </tr>
    <tr>
      <td>Terminal:</td>
      <td><input type="text" name="TXTterminal" id="terminal"/></td>
    </tr>
    <tr>
      <td colspan="2" rowspan="1" align="center"><input type="submit" value="Enviar" name="BTNenviar" /></td>
    </tr>
  </tbody>
</table>
</form>
<div id="resultado"></div>
</body>
</html>

Adler · #2 (**permalink**) 06/10/2009, 14:01

Hola

Bueno esto que te ocupa es AJAX asíncrono. Así que solo has de comprobar en que estado (1,2 o 3) se encuentra la comunicación. En esos estado usas la imagen de cargando

Suerte

estefanosalazar · #3 (**permalink**) 06/10/2009, 14:04

Hola!

En donde haces xmlhttp.onreadystatechange, te convendria hacerlo de esta forma

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
document.getElementById('resultado').innerHTML=xml http.responseText;
}else {
CARGAA.....
}
}

bacdavi · #4 (**permalink**) 06/10/2009, 16:42

Cita:

Iniciado por estefanosalazar

Hola!

En donde haces xmlhttp.onreadystatechange, te convendria hacerlo de esta forma

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 || xmlhttp.readyState=="complete") {
document.getElementById('resultado').innerHTML=xml http.responseText;
}else {
CARGAA.....
}
}

Ohh amigo gracias lo voy a probar!
mi pregunta q soy novato en js, una vez xmlhttp.readyState==4 o xmlhttp.readyState=="complete" se mostrara la imagen que quiero, mientras no obtenga datos no tendre nada hsta completar el proceso, o debo recargar??

disculpa mi ignorancia!

estefanosalazar · #5 (**permalink**) 06/10/2009, 17:06

Hola nuevamente!

No es necesario que recargues, todo lo que tenes que hacer es despues mostrarlo con (en tu caso) xmlhttp.responseText.

Realmente no estoy seguro si "complete" es uno de los estados de Ajax.

Te recomendaria que saques el "complete".

Los estados de Ajax van de 0 a 4

0: sin inicializar
1: abierto
2: cabeceras recibidas
3: cargando
4: completo

Por eso mismo, los pasos 0, 1, 2 y 3 los tomas como que todavia esta cargando, y una vez que este en su estado 4 (completo) borras el texto/imagen de carga.

Saludos!

Adler · #6 (**permalink**) 07/10/2009, 05:48

Hola

complete lo leería IE y Opera. Prueba con esto

Código javascript:

Ver originalif (ajax==null){
            alert ("Tu navegador web no soporta AJAX!");
        return;
    }
        if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
                                        enespera.innerHTML = "<img src='precarga.gif' border='0' />";
            }
                else if (ajax.readyState==4){
                        if(ajax.status==200){
.......
 
 
                        }
                    else if (ajax.status==404)
                                             {
                                    objetosel.innerHTML = "La dirección no existe";
                                             }
                                     else
                                             {
                                    objetosel.innerHTML = "Se ha producido un error";
                                             }
                                    }
                  }

Claro está, cambiando el objeto ajax por xmlhttp y objetosel por el elemento que va a recibir la respuesta

Suerte

bacdavi · #7 (**permalink**) 09/10/2009, 11:25

Gracias amigos, ahora fijense q necesito q ese div se actualice pero no he podido aun con un setinterval o algo asi!

Saludos

Adler · #8 (**permalink**) 09/10/2009, 12:22

Hola

Prueba con esto

window.onload = function () {window.setInterval("funcion()",900000);};

Suerte

bacdavi · #9 (**permalink**) 09/10/2009, 16:03

Cita:

Iniciado por Adler

Hola

Prueba con esto

window.onload = function () {window.setInterval("funcion()",900000);};

Suerte

Gracias, pero lo que necesito es actualizar un div especifico!

muy buena la idea pero es solo para un div no para toda la pagina!

Adler · #10 (**permalink**) 10/10/2009, 04:47

Hola

Cita:

Iniciado por bacdavi

Gracias, pero lo que necesito es actualizar un div especifico!

muy buena la idea pero es solo para un div no para toda la pagina!

Bueno, me temo que ni tan siquiera lo has probado, ya que lo que hace es ejecutar un función cada cierto intervalo de tiempo

Suerte

bacdavi · #11 (**permalink**) 10/10/2009, 11:21

Cita:

Iniciado por Adler

Hola

Bueno, me temo que ni tan siquiera lo has probado, ya que lo que hace es ejecutar un función cada cierto intervalo de tiempo

Suerte

Te cuento que ya lo he probado y por eso es que te decia que no me funciona con mi div...

Agradezco la ayuda, aunque sigo investigando como poder actualizar el div....

Adler · #12 (**permalink**) 10/10/2009, 12:51

Hola

Imprime lo que tienes

Suerte