Estado "LOADING" en ajax con firefox: NO LO MUESTRA

mdromed · #1 (**permalink**) 04/11/2009, 08:28

He metido un gif animado en el estado "Loading" (onreadystatechange = 1 vamos) para que se vea mientras se carga el ajax y en todos los navegadores(ie8, safari 4, chrome, opera 10) se ve bien excepto en firefox 3 que no da error pero no muestra el gif animado ni el texto "cargando...." que he puesto al lado del gif.

¿Como puedo hacer en firefox que lo que ponga en el estado del loading se muestre?

Gracias

David · #2 (**permalink**) 04/11/2009, 08:40

Sin ver cómo tienes el código es difícil saber cuál puede ser el problema.

mdromed · #3 (**permalink**) 04/11/2009, 10:07

ok ahora lo pongo

Panino5001 · #4 (**permalink**) 04/11/2009, 11:15

Ojo, esto está mal: onreadystatechange = 1
La condición debería ser: readyState==1

mdromed · #5 (**permalink**) 04/11/2009, 11:28

Cita:

Iniciado por Panino5001

Ojo, esto está mal: onreadystatechange = 1
La condición debería ser: readyState==1

Si si, eso lo tengo bien.
Espera que subo el codigo y lo veis

mdromed · #6 (**permalink**) 04/11/2009, 11:32

Ahi va:

Fichero "project/includes/funcionesAjax.js"
Nota, las variables aaa y bbb son globales a todas las funciones. La uso en lugar de pasar parametros a la funcion del onreadystatechange.

Código:

function fun_ajaxLeerDatos(){
	switch(var_ObjetoXMLHttpRequest.readyState){
		case 0:{break;} //Uninitialized
		case 1:{
					var objHtmlActualizar;
					objHtmlActualizar = document.getElementById(bbb);
					objHtmlActualizar.innerHTML = "<img src='../project/images/aniIcons/loader.gif' /> Cargando";
					break;
		
		} //Loading
		case 2:{break;} //Loaded
		case 3:{break;} //Interactive
		case 4:{ //Completed
			switch(aaa){
				case 'logueo':{
					var objHtmlActualizar;
					objHtmlActualizar = document.getElementById(bbb);
					objHtmlActualizar.innerHTML = var_ObjetoXMLHttpRequest.responseText;
					break;
				}
			}
		}
	}
}





function fun_ajaxCrearObjeto(){
	var var_objAjax;

	try{var_objAjax = new XMLHttpRequest();}
	catch(e){
		try{var_objAjax = new ActiveXObject("Microsoft.XMLHTTP");}
		catch(e){
			try{var_objAjax = new ActiveXObject("Msxml2.XMLHTTP");}
			catch(e){alert("Su navegador no soporta javascript o lo tiene deshabilitado."); var_objAjax=false;}
		}
	}
	
	return(var_objAjax);
}



var var_ObjetoXMLHttpRequest = fun_ajaxCrearObjeto();
var aaa;
var bbb;

function fun_ajaxComprobarLogueo(arg_email, arg_passw, arg_recuerdaDatos, arg_urlDestino, arg_idObjHtmlContenedor){
	aaa="logueo";
	bbb=arg_idObjHtmlContenedor;
	var_ObjetoXMLHttpRequest.open("POST", arg_urlDestino);
	var_ObjetoXMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	var_ObjetoXMLHttpRequest.send("arg_email=" + arg_email + "&arg_passw=" + arg_passw);
	var_ObjetoXMLHttpRequest.onreadystatechange = fun_ajaxLeerDatos;
}

mdromed · #7 (**permalink**) 04/11/2009, 11:35

Fichero "project/includes/funciones.js"

Código:

function fun_llevaFocoA(arg_nomObj){
	var obj_ObjetoHtml;
	obj_ObjetoHtml = document.getElementById(arg_nomObj);
	if(obj_ObjetoHtml){
		obj_ObjetoHtml.focus();
	}
	obj_ObjetoHtml = null;
}

mdromed · #8 (**permalink**) 04/11/2009, 11:36

y el Fichero php que contiene todo

TODO EL MEOLLO DEL AJAX SE EJECUTA EN EL EVENTO "ONKEYPRESS" DE "CAJA_EMAIL"

Código PHP:

  <?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//ES" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >

    <head>

        <title>:: Project </title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta http-equiv="Expires" content="0" />

<meta http-equiv="Cache-Control" content="no-cache,must-revalidate" />

<meta name="Date" content="Jul 25, 2009" />

<meta name="Description" content="ddoiddodo" />

<meta name="Keywords" content="lalalala" />

<link rel="stylesheet" type="text/css" href="http://localhost:81/project/css/styles01.css" media="all" />

<script type="text/javascript" src="http://localhost:81/project/includes/functions.js"></script>

<script type="text/javascript" src="http://localhost:81/project/includes/ajaxFunctions.js"></script>    

</head>

    <body>

        <div id="css_capaContenidoIzq" style="width: 73%; height: 450px;">

            <div class="css_capaCentrado">

                <div class="css_capaContenedoraCuadro">

                    <form id="frm_identificacion" action="#" class="css_FormularioH" onsubmit="document.forms['frm_identificacion'].bt_entrar.disabled=true;">

                        <div class="css_capaCabCuadro"><img src="http://localhost:81/project/images/icons/key.png" alt="s" /> <legend><b>Identificación de usuarios</b></legend></div>

                        <div class="css_capaCuerpoCuadro">

                            <fieldset>

                                <ul>

                                    <li><label for="caja_email">Email</label> <input type="text" id="caja_email" value="" maxlength="100" class="css_cajaLarga" onkeypress="javascript:fun_ajaxComprobarLogueo(window.document.forms[0].caja_email.value , window.document.forms[0].caja_contrasenya.value, window.document.forms[0].check_recordar.checked, 'includes/checkUserAccess.php', 'capa_mensajesLogueo');" /><span id="resulChequeoEmail"></span></li>

                                    <li><label for="caja_contrasenya">Contraseña</label> <input type="password" id="caja_contrasenya" value="" maxlength="100" class="css_cajaLarga" /></li>

                                    <li>

                                        <label for="check_recordar">¿Recordar datos?</label> <input type="checkbox" id="check_recordar" />

                                    </li>

                                    <li>

                                        Escriba en la caja de texto el resultado de la siguiente operación:

                                    </li>

                                </ul>

                            </fieldset>

                            <div id="capa_mensajesLogueo"></div>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </body>

</html>

David · #9 (**permalink**) 04/11/2009, 11:46

Prueba asignar el evento onreadystatechange antes de llamar al método send() del objeto XMLHttpRequest.

mdromed · #10 (**permalink**) 05/11/2009, 04:18

Cita:

Iniciado por David

Prueba asignar el evento onreadystatechange antes de llamar al método send() del objeto XMLHttpRequest.

Hace exactamente lo mismo!
He de decir que en IE5.5 y IE6 tampoco lo hace bien además de firefox 3.
Pero en IE7, IE8, safari 4, opera 10 y Chrome 3 lo hace perfecto.

mdromed · #11 (**permalink**) 05/11/2009, 04:30

Ya funciona!
He probado a ponerlo, no solo antes del "send()" sino tambien, antes del "setRequestHeader" y ahora sí que lo hace perfecto en todos los navegadores.....incluido IE5.5 y IE6!!!!

Gracias a todos por las molestias!
Saludos