Foros del Web » Programando para Internet » Javascript »

Mostrar Imangen "CARGANDO" mientras procesa informacion

Estas en el tema de Mostrar Imangen "CARGANDO" mientras procesa informacion en el foro de Javascript en Foros del Web. Hola a todos... Alguien podría ayudarme con un pequeño "manual rapido de instrucciones" para que mientras se realice una consulta aparezca la imagen (GIF) CARGANDO... ...
  #1 (permalink)  
Antiguo 13/10/2010, 09:53
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses
Puntos: 4
Pregunta Mostrar Imangen "CARGANDO" mientras procesa informacion

Hola a todos...
Alguien podría ayudarme con un pequeño "manual rapido de instrucciones" para que mientras se realice una consulta aparezca la imagen (GIF) CARGANDO...

Les cuento... trabajo con JAVA, uso JAVASCRIPT para validar campos y la consulta es con AJAX...

en la consulta tengo esto...

Código:
/*Ésta función se encarga de gestionar por medio del servlet ConsultarProyecto
la consulta de los datos.*/ 

function ConsultarProyectos(){
  url = "Consultar?";
     /* Se capturan los datos del formulario*/
     tipo = document.getElementById('cboTipo').value;
     valor = document.getElementById('txtValor').value; 

     /* Se envian los datos a través del metodo POST*/		
     ajax1 = getAjaxObject();
     ajax1.open( 'POST',url, true );
     ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');	
     ajax1.send('cboTipo=' + escape(tipo)+ '&txtValor=' + escape(valor));	       	  	
     ajax1.onreadystatechange = procesarConsulta; 
}	  	

function procesarConsulta(){

//readyState = 4 completo peticion
     if( ajax1.readyState == 4 ){

          //status = 200 correctamente -- 404 no encuentra la pagina -- 500 problemas en el server
          if( ajax1.status == 200 ){
	respuesta = ajax1.responseText;
	document.getElementById("ajax").innerHTML = respuesta;
           }
     }
}
Ojala me puedan ayudar!!!!!!
__________________
Gabo Duk3
I.S
  #2 (permalink)  
Antiguo 13/10/2010, 12:32
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

estás usando ajax asíncrono con lo que cuando invocas al método onreadystatechange, tienes cuatro estados. tu solamente estás usando el último, pero cuando la petición y respuesta esté en los estados 1,2 y 3 puedes mostrar una imagen
  • 1: Abierto. Se acaba de llamar al método send.
  • 2: Enviando. Se está enviando la petición al servidor.
  • 3: Recibiendo. Se está recibiendo la respuesta del servidor.
  #3 (permalink)  
Antiguo 13/10/2010, 14:18
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses
Puntos: 4
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

Cita:
Iniciado por IsaBelM Ver Mensaje
estás usando ajax asíncrono con lo que cuando invocas al método onreadystatechange, tienes cuatro estados. tu solamente estás usando el último, pero cuando la petición y respuesta esté en los estados 1,2 y 3 puedes mostrar una imagen
  • 1: Abierto. Se acaba de llamar al método send.
  • 2: Enviando. Se está enviando la petición al servidor.
  • 3: Recibiendo. Se está recibiendo la respuesta del servidor.
Hola Isabel... y ante todo mil gracias por responder!!!!

Siendo asi... me podrías explicar que tengo que hacer o como lo hago... en alguna web vi que necesitaba crear la imagen en un <DIV> como oculta y cuando se procese cambiarle el estado, pero no entendi muy bien...

Lo que tu me dices del estado del metodo onreadystatechange es en la sentencia ajax1.onreadystatechange = procesarConsulta;

o en if( ajax1.readyState == 4 ){

Te lo consulto porque ando un poco corto en ajax....

Me ayudas ??
__________________
Gabo Duk3
I.S
  #4 (permalink)  
Antiguo 13/10/2010, 14:29
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

normalmente no es necesario crear un div oculto. por otro lado validas los otros 3 estado antes de if( ajax1.readyState == 4 ). algo como if(ajax1.readyState == 1 && ajax1.readyState == 2 && ......)
en el div donde se cargará respuesta, muestras la imagen
  #5 (permalink)  
Antiguo 19/10/2010, 09:22
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses
Puntos: 4
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

Cita:
Iniciado por IsaBelM Ver Mensaje
normalmente no es necesario crear un div oculto. por otro lado validas los otros 3 estado antes de if( ajax1.readyState == 4 ). algo como if(ajax1.readyState == 1 && ajax1.readyState == 2 && ......)
en el div donde se cargará respuesta, muestras la imagen
De nuevo mil gracias por la respuesta...

Pero la verdad ando muy muy muy corto en esto... y la verdad no se muy bien como hacerlo, en una web me encontre algo que lo tengo asi...

Código:
if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
  div.innerHTML = ajax.responseText
  document.getElementById('imagen').style.display = 'none'
}else {
  div.innerHTML = ajax.responseText
  document.getElementById('imagen').style.display = 'block'
}
En el div tengo esta "burrada"

Código:
<div align="center" id="imagen"><img src="images/cargando.gif" name="Image3" width="112" height="112" border="0" style="hidden" >          	 
<td colspan="3" id="ajax">&nbsp;</td>
</div>
Plz Ayudame!!!!!
__________________
Gabo Duk3
I.S
  #6 (permalink)  
Antiguo 19/10/2010, 12:26
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

así
Cita:
if (ajax.readyState==1 || ajax.readyState==2 || ajax.readyState==3) {
document.getElementById('imagen').innerHTML = '<img src="images/cargando.gif" name="Image3" width="112" height="112" border="0" />';
}
else if( ajax1.readyState == 4 ){


if( ajax1.status == 200 ){
document.getElementById('imagen').innerHTML = ajax.responseText

}
}


<div align="center" id="imagen"></div>
  #7 (permalink)  
Antiguo 02/11/2010, 14:49
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses
Puntos: 4
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

Cita:
Iniciado por IsaBelM Ver Mensaje
así
Hola Isa....

De nuevo vengo a molestarte con el mismo tema...

Intente con el ultimo Cod que me enviaste, pero me pasa algo...
La imagen aparece luego de efectuarse la consulta en la BD.... y luego de eso sigue aun apareciendo...
Otra cosa... la imagen aparece en una parte determinada del documento... tu por casualidad no conoces la forma de "sobreponerla" o algo asi...???

Que puedo hacer???
Y gracias que gran ayuda la que me has dado :-p!!!!
__________________
Gabo Duk3
I.S

Última edición por gabrican; 02/11/2010 a las 15:01
  #8 (permalink)  
Antiguo 02/11/2010, 15:04
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

estos son los cambios que le he hecho, a ver si ahora funciona
Cita:
<script type="text/JavaScript">
//-->
/*Crea el objeto para enviar las peticiones al servidor.*/
var ajax;
function getAjaxObject(){
if( window.XMLHttpRequest ){
varAjax = new XMLHttpRequest(); // No Internet Explorer
}else{
varAjax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
return varAjax;
}

/*Ésta función se encarga de gestionar por medio del servlet ConsultarProyecto
la consulta de los datos.*/
function ConsultarProyectos(){
url = "ConsultarProyectost?";
/* Se capturan los datos del formulario*/
tipo = document.getElementById('cboTipo').value;
valor = document.getElementById('txtValor').value;
/* Se envian los datos a través del método POST*/
ajax1 = getAjaxObject();
ajax1.open( 'POST',url, true );
ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
ajax1.send('cboTipo=' + escape(tipo)+ '&txtValor=' + escape(valor));
ajax1.onreadystatechange = function() { // función anónima


if (ajax1.readyState==1 || ajax1.readyState==2 || ajax1.readyState==3) {
document.getElementById('imagen').innerHTML = '<img src="images/cargando.gif" name="Image3" width="112" height="112" border="0"/>';
}else if(ajax1.readyState == 4 ){

//status = 200 correctamente -- 404 no encuentra la pagina -- 500 problemas en el server
if( ajax1.status == 200 ){
document.getElementById('imagen').innerHTML = ajax1.responseText
//respuesta = ajax1.responseText;
//alert(respuesta);
//document.getElementById("ajax").innerHTML = respuesta;
}
}
}
}
</script>

<body>
<div align="center" id="imagen"></div>
......
  #9 (permalink)  
Antiguo 02/11/2010, 15:09
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses
Puntos: 4
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

Cita:
Iniciado por IsaBelM Ver Mensaje
estos son los cambios que le he hecho, a ver si ahora funciona
Hola...
Efectivamente el error del ajax1 lo vi y lo modifique...
Adicional a eso puse algo en la primera funcion...

Código:
   
var ajax;
	function getAjaxObject(){
		if( window.XMLHttpRequest ){
			varAjax = new XMLHttpRequest(); // No Internet Explorer
		}else{
			varAjax = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
		}
		return varAjax;
	}
 	
	/*Ésta función se encarga de gestionar por medio del servlet ConsultarProyecto
	la consulta de los datos.*/ 
	function ConsultarProyectos(){
			url = "ConsultarProyectost?";
			/* Se capturan los datos del formulario*/
			tipo = document.getElementById('cboTipo').value;
			valor = document.getElementById('txtValor').value; 
			/* Se envian los datos a través del método POST*/	
			document.getElementById('imagen').innerHTML ='<img src="images/cargando.gif" name="Image3" width="50" height="50" border="0"/>';				ajax1 = getAjaxObject();
			ajax1.open( 'POST',url, true );
			ajax1.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');	
			ajax1.send('cboTipo=' + escape(tipo)+ '&txtValor=' + escape(valor));	       	  	
			ajax1.onreadystatechange = procesarConsulta; 
		}	  	
		
		function procesarConsulta(){
			if (ajax1.readyState==1 || ajax1.readyState==2 || ajax1.readyState==3) {
				document.getElementById('imagen').innerHTML ='<img src="images/cargando.gif" name="Image3" width="50" height="50" border="0"/>';
			}else if(ajax1.readyState == 4 ){
				
				//status = 200 correctamente -- 404 no encuentra la pagina -- 500 problemas en el server
				if( ajax1.status == 200 ){
					document.getElementById('imagen').style.display='none';					respuesta = ajax1.responseText;
					//alert(respuesta);
					document.getElementById("ajax").innerHTML = respuesta;
		 		}
			}
	 	}
Asi, con esas modificaciones la imagen funciona perfectamente, pero con un error...

Si hago la consulta la primera vez... funciona de maravilla, pero si sobre esa consulta realizo otra... ya no se muestra....

Que podria hacer para esa solucion

De nuevo 5 millones de gracias.... !!!!!!
__________________
Gabo Duk3
I.S
  #10 (permalink)  
Antiguo 02/11/2010, 15:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

parece que estas reutilizando el objeto XHTML, tienes que destruirlo y volverlo a crear. lee alguna de estos artículos
edito: imagen?? para qué usas la primera línea en rojo?? hazlo como te he indicado, con una función anónima
  #11 (permalink)  
Antiguo 02/11/2010, 15:37
Avatar de gabrican  
Fecha de Ingreso: junio-2008
Ubicación: Medellin
Mensajes: 89
Antigüedad: 15 años, 10 meses
Puntos: 4
Respuesta: Mostrar Imangen "CARGANDO" mientras procesa informacion

Cita:
Iniciado por IsaBelM Ver Mensaje
parece que estas reutilizando el objeto XHTML, tienes que destruirlo y volverlo a crear. lee alguna de estos artículos
edito: imagen?? para qué usas la primera línea en rojo?? hazlo como te he indicado, con una función anónima
Isa... mi mision principal era que mostrara la imagen al efectuar una consulta... y con tu ayuda lo logré...
Mil mil gracias!!!
Eres un belleza en todo el sentido de la palabra......!!!!

TKS y nos veremos en otro post...

PD: lo de la destruccion del objeto XHTML lo buscaré y lo pondré en funcionamiento
__________________
Gabo Duk3
I.S

Etiquetas: informacion, mientras
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:45.