Foros del Web » Programación web » Javascript »

Mostrar una barra de progreso mientras se cargan los datos

Estas en el tema de Mostrar una barra de progreso mientras se cargan los datos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/04/2009, 02:58
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 5 años, 8 meses
Puntos: 0
Pregunta Mostrar una barra de progreso mientras se cargan los datos

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)  
Antiguo 16/04/2009, 03:17
machoman112233
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

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

Código javascript:
Ver original
  1. function ajaxLoad()
  2. {
  3.     var ajax = null;
  4.  
  5.     if(window.XMLHttpRequest)
  6.     {
  7.         ajax = new XMLHttpRequest();
  8.     }
  9.     else if(window.ActiveXObject)
  10.     {
  11.         ajax = new ActiveXObject("Microsoft.XMLHTTP");
  12.     }
  13.     else
  14.     {
  15.         ajax = false;
  16.     }
  17.  
  18.     return(ajax);
  19. }
  20.  
  21.  
  22. var ajax = ajaxLoad();
  23. document.getElementById("asd").innerHTML = "<img src=\"loading1.gif\" />"; //imagen de carga
  24. ajax.open("GET","php que genera los datos (por ejemplo)");
  25.                            
  26. ajax.onreadystatechange = function()
  27. {
  28.        if(ajax.readyState == 4)
  29.        {
  30.               document.getElementById("asd").innerHTML = ajax.responseText; //resposta del server con los datos
  31.        }
  32. }
  33.  ajax.send(null);
  #3 (permalink)  
Antiguo 16/04/2009, 03:26
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

gracias por responder tan pronto!!

tengo una duda, donde pones "asd" que tendría que poner ahí??
  #4 (permalink)  
Antiguo 16/04/2009, 03:35
machoman112233
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

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...
  #5 (permalink)  
Antiguo 16/04/2009, 04:12
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

no me funciona, me da error en el document.getelementbyid("nombre id")
  #6 (permalink)  
Antiguo 16/04/2009, 04:29
machoman112233
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

En cual de todos los getElementById()...
  #7 (permalink)  
Antiguo 16/04/2009, 04:32
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

en este:

document.getElementById("asd").innerHTML = "<img src=\"loading1.gif\" />";
  #8 (permalink)  
Antiguo 16/04/2009, 04:35
machoman112233
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

Prueba poner en una funcion...

Código javascript:
Ver original
  1. function load()
  2. {
  3. var ajax = ajaxLoad();
  4. document.getElementById("asd").innerHTML = "<img src=\"loading1.gif\" />"; //imagen de carga
  5. ajax.open("GET","php que genera los datos (por ejemplo)");
  6.                            
  7. ajax.onreadystatechange = function()
  8. {
  9.        if(ajax.readyState == 4)
  10.        {
  11.               document.getElementById("asd").innerHTML = ajax.responseText; //resposta del server con los datos
  12.        }
  13. }
  14. ajax.send(null);
  15. }
  16.  
  17. window.onload = function(){
  18. load();
  19. }
  #9 (permalink)  
Antiguo 16/04/2009, 04:50
machoman112233
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

Una parte mas completa...

Código javascript:
Ver original
  1. <html>
  2. <head>
  3.  
  4. <script type="text/javascript">
  5. function ajaxLoad()
  6. {
  7.     var ajax = null;
  8.  
  9.     if(window.XMLHttpRequest)
  10.     {
  11.     ajax = new XMLHttpRequest();
  12.     }
  13.     else if(window.ActiveXObject)
  14.     {
  15.         ajax = new ActiveXObject("Microsoft.XMLHTTP");
  16.     }
  17.     else
  18.     {
  19.         ajax = false;
  20.     }
  21.  
  22.     return(ajax);
  23. }
  24.  
  25. function load()
  26. {
  27.     var ajax = ajaxLoad();
  28.     document.getElementById("load").innerHTML = "<img src=\"loading1.gif\" />"; //imagen de carga
  29.     ajax.open("GET","php que genera los datos (por ejemplo)");
  30.                            
  31.     ajax.onreadystatechange = function()
  32.     {
  33.         if(ajax.readyState == 4)
  34.         {
  35.               document.getElementById("data").innerHTML = ajax.responseText; //resposta del server con los datos
  36.               document.getElementById("load").innerHTML = ""; //saca fuera para ver si aparece bien tu gif de carga
  37.         }
  38.     }
  39. ajax.send(null);
  40. }
  41.  
  42. window.onload = function(){
  43. load();
  44. }
  45. </script>
  46. </head>
  47. <body>
  48. <div id="data" style="width: 300px; height: 300px; float: left;"></div>
  49. <div id="load" style="width: 300px; height: 300px; float: left;"></div>
  50. </body>
  51. </html>
  #10 (permalink)  
Antiguo 16/04/2009, 04:55
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

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:
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("btnLocalizar").innerHTML = "<img src=\"Images/wait.gif\" />"; //imagen de cargaajax.open("GET","php que genera los datos (por ejemplo)");
ajax.onreadystatechange = function(){
if(ajax.readyState == 4) {
document.getElementById("btnLocalizar").innerHTML = ajax.responseText; //resposta del server con los datos
}}
ajax.send(null);
}
window.onload = function(){load();}
  #11 (permalink)  
Antiguo 16/04/2009, 05:10
 
Fecha de Ingreso: marzo-2009
Mensajes: 74
Antigüedad: 5 años, 8 meses
Puntos: 0
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

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)  
Antiguo 16/04/2009, 05:23
machoman112233
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

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...
  #13 (permalink)  
Antiguo 16/04/2009, 14:16
 
Fecha de Ingreso: diciembre-2004
Mensajes: 96
Antigüedad: 9 años, 11 meses
Puntos: 0
Respuesta: Mostrar una barra de progreso mientras se cargan los datos

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 17:00.
SEO by vBSEO 3.3.2