Mostrar una barra de progreso mientras se cargan los datos

krinnis · #1 (**permalink**) 16/04/2009, 01:58

Hla buenos días,

levo bastantes días buscando cómo colocar una barra de progreso en mi aplicación a la hora de cargar datos y no encuentro ninguna forma.

Mi aplicación consiste en mostrar los resultados de las búsquedas que realiza en usuario, por lo que hay algunas que tardan bastantes y me gustaría mostrar una barra de carga, no hace falta que sea mostrando ni el porcentaje de lo que queda. con tal de que muestre el recorrido del proceso, me da igual si es continuo, no se si me entiendo.

Muchas gracias por todo!!

#2 (**permalink**) 16/04/2009, 02:17

Eso se hace mediante ajax... algo simple...

Código javascript:

Ver originalfunction ajaxLoad()
{
    var ajax = null;
 
    if(window.XMLHttpRequest)
    {
        ajax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        ajax = false;
    }
 
    return(ajax);
}
 
 
var ajax = ajaxLoad();
document.getElementById("asd").innerHTML = "<img src=\"loading1.gif\" />"; //imagen de carga
ajax.open("GET","php que genera los datos (por ejemplo)");
                            
ajax.onreadystatechange = function()
{
       if(ajax.readyState == 4)
       {
              document.getElementById("asd").innerHTML = ajax.responseText; //resposta del server con los datos
       }
}
 ajax.send(null);

krinnis · #3 (**permalink**) 16/04/2009, 02:26

gracias por responder tan pronto!!

tengo una duda, donde pones "asd" que tendría que poner ahí??

#4 (**permalink**) 16/04/2009, 02:35

Es la id del elemento div, fieldset, etc donde muestras los datos o donde quieres poner la barra de progreso, etc... YO la tengo puesto en el mismo sitio, tanto cargar como mostrar los datos...

krinnis · #5 (**permalink**) 16/04/2009, 03:12

no me funciona, me da error en el document.getelementbyid("nombre id")

#6 (**permalink**) 16/04/2009, 03:29

En cual de todos los getElementById()...

krinnis · #7 (**permalink**) 16/04/2009, 03:32

en este:

document.getElementById("asd").innerHTML = "<img src=\"loading1.gif\" />";

#8 (**permalink**) 16/04/2009, 03:35

Prueba poner en una funcion...

Código javascript:

Ver originalfunction load()
{
var ajax = ajaxLoad();
document.getElementById("asd").innerHTML = "<img src=\"loading1.gif\" />"; //imagen de carga
ajax.open("GET","php que genera los datos (por ejemplo)");
                            
ajax.onreadystatechange = function()
{
       if(ajax.readyState == 4)
       {
              document.getElementById("asd").innerHTML = ajax.responseText; //resposta del server con los datos
       }
}
ajax.send(null);
}
 
window.onload = function(){
load();
}

#9 (**permalink**) 16/04/2009, 03:50

Una parte mas completa...

Código javascript:

Ver original<html>
<head>
 
<script type="text/javascript">
function ajaxLoad()
{
    var ajax = null;
 
    if(window.XMLHttpRequest)
    {
    ajax = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        ajax = false;
    }
 
    return(ajax);
}
 
function load()
{
    var ajax = ajaxLoad();
    document.getElementById("load").innerHTML = "<img src=\"loading1.gif\" />"; //imagen de carga
    ajax.open("GET","php que genera los datos (por ejemplo)");
                            
    ajax.onreadystatechange = function()
    {
        if(ajax.readyState == 4)
        {
              document.getElementById("data").innerHTML = ajax.responseText; //resposta del server con los datos
              document.getElementById("load").innerHTML = ""; //saca fuera para ver si aparece bien tu gif de carga
        }
    }
ajax.send(null);
}
 
window.onload = function(){
load();
}
</script>
</head>
<body>
<div id="data" style="width: 300px; height: 300px; float: left;"></div>
<div id="load" style="width: 300px; height: 300px; float: left;"></div>
</body>
</html>

krinnis · #10 (**permalink**) 16/04/2009, 03:55

lo siento por el coñazo que te estoy dando, XD

pero me sigue dando el error, error desconocido en tiempo de ejecución

tengo este código en la página de codigo html, a ver si viendo tu el codigo me puedes decir donde esta el error:

Cita:

krinnis · #11 (**permalink**) 16/04/2009, 04:10

he cambiado lo de btnLocalizar, y he creado un div, donde quiero q aparezca la barra, entonces en vex de btnLocalizar, he puesto "progressbar", por lo que si q reconoce el document.getelementbyid....

pero me da un error no especificado en ajax.send(null);

una cosa, la barra de progreso tiene q aparecer cuando le de a un botón y desaparecer cuando termine de mostrar los datos

gracias!!

#12 (**permalink**) 16/04/2009, 04:23

No se mucho de ajax... voy aprendiendo sobre la marcha, pero lo de send(null) si no me equivoco es para decir que no hay ninguna peticion HTTP al servidor, auque no estoy seguro...

Para sacar la imagen de carga en el if de readyState == 4 agregas tambien document.getElementById("id_bara_progreso").innerH TML = ""; (que sea en blanco)... faltan muchas cosas para aprendre...

PD: aqui un libro de ajax... esta bastante bien...

msdwh · #13 (**permalink**) 16/04/2009, 13:16

hola amigo si aun sigues con el problema te comento esta solucion

Código PHP:

  <html> 
<head>  
<script type="text/javascript"> 
 
ajax = function() 
{ 
  var objetoAjax=false; 
  try { 
       objetoAjax = new ActiveXObject('Msxml2.XMLHTTP'); 
       } 
  catch (e) 
  { 
    try { 
        objetoAjax = new ActiveXObject('Microsoft.XMLHTTP'); 
        } 
    catch (E)  
    { 
        objetoAjax = false; 
    } 
  } 
 
    if (!objetoAjax && typeof XMLHttpRequest != 'undefined')  
    { 
           objetoAjax = new XMLHttpRequest(); 
    } 
     return objetoAjax; 
} 
 
 
 
 function load() 
{   
   var ajax = ajax();    
   var divContenedor =  document.getElementById("load"); 
   var divContenedorDatos =  document.getElementById("data"); 
 
    ajax.open("GET","php que genera los datos (por ejemplo)");                                     
     
   ajax.onreadystatechange = function()     
   {        
     if(ajax.readyState <= 3) 
      { 
         divContenedor.style.display = 'block';   
      } 
 
     if(ajax.readyState == 4)         
     { 
         divContenedorDatos.innerHTML = ajax.responseText; //resposta del server con los datos              
         divContenedor.style.display = 'none' 
 
       }     
   } 
ajax.send(null); 
}  
 
window.onload = function()  
{ 
      load(); 
} 
</script> 
</head> 
<body> 
<div id="load" style="display:none;position:absolute;top:0;bottom:0%;left:0;right:0%;z-index:99;height:300px;width:300px;background-image:url(../images/ajax-loader.gif);"></div> 
<div id="data" style="width: 300px; height: 300px; float: left;"></div> 
</body> 
</html>

en la etiqueta background-image:url() pasale el nombre de la imagen que sera tu preload y listo debe de funcionarte sin problemas cualquier cosa avisame y con gusto te ayudaremos

Saludos