Mostrar Imangen "CARGANDO" mientras procesa informacion

[gabrican]

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!!!!!!

[IsaBelM]

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.

[gabrican]

Iniciado por IsaBelM

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 ??

[IsaBelM]

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

[gabrican]

Iniciado por IsaBelM

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!!!!!

[IsaBelM]

así

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>

[gabrican]

Iniciado por IsaBelM

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!!!!

[IsaBelM]

estos son los cambios que le he hecho, a ver si ahora funciona

<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>
......

[gabrican]

Iniciado por IsaBelM

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.... !!!!!!

[IsaBelM]

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

[gabrican]

Iniciado por IsaBelM

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