Mostrar Imagen Loading

[madman_18]

Hola, no sé si el tema iría aquí pero bueno.
En mi página tengo un login, lo que quiero hacer es mostrar la imagen típica de Cargando (el circulito dando vueltas vamos) mientras consulto con la base de datos.
Que se mostrase y después me dijera si el usuario es correcto, incorrecto, si existe etc...
El problema es que no consigo hacerlo, no sé si estoy equivocado en el enfoque que le doy o no sé.
Pongo el código por si alguno me pudiera decir como hacerlo, si esta mal el planteamiento etc.
Ahh! Aquí mezclo XAJAX con PHP, por eso no sé como hacerlo ya que XAJAX lo estoy aprendiendo ahora jejeje.
((justo antes de estas líneas de código, me creo un objeto xajaxResponse llamado $respuesta y realizo la consulta en la bbdd))

$cadena_resultado = "Pondría la ruta de la imagen";//aquí cargaría la imagen
$respuesta->assign("mensaje","innerHTML",$cadena_resultado) ;//lo mostraría
return $respuesta;
sleep(3);
$cadena_resultado = "No Existe ese Usuario <img src=\"images/icontexto-webdev-alert-032x032.png\"/>";
$respuesta->assign("mensaje","innerHTML",$cadena_resultado) ;//lo mostraría
return $respuesta;

Estoy usando la última versión de XAJAX la 0.5.
Gracias!

[maycolalvarez]

los eventos en xajax 0.5 son: xajax.callback.global.onRequest y xajax.callback.global.beforeResponseProcessing

adapta este código según tus necesidades al final de tus paginas

Código javascript:

<script type="text/javascript">
if(typeof(xajax)!='undefined'){
    if(xajax!=null){
        xajax.callback.global.onRequest = function() {
            document.getElementById('load_animate').style.display='';
        }
        xajax.callback.global.beforeResponseProcessing = function() {
            document.getElementById('load_animate').style.display='none';
        }
    }
}else{
    document.getElementById('load_animate').style.display='none';
}
</script>
 

y el css correspondiente lo puede aplicar como desees:

Código CSS:

#load_animate{
    position:fixed;
    left:40%;
    top:0px;
    z-index:500;
    height:13px;
    width:208px;
    background-image:url(../img/loading_bar.gif);
    background-repeat:no-repeat;
}
 

[madman_18]

Hey muchas gracias ahora me ha funcionado a la perfección jejeje. Es lo que tiene ir aprendiendo poco a poco jajaja. Muchísimas gracias!.

Edito:
Pero ahora me surge una nueva duda (perdón por ser tan cansino jejeje) esa función xajax, se podría mezclar con javascript?? Me explico, querría mostrar un alert si no escriben el usuario o contraseña que pido, pero que siga saliendo la imagen de carga. Pero cuando lo intento, me envía el formulario.
Mi pregunta es:
Si la función en jScript que me comprueba los valores de los campos usuario y contraseña iría donde xajax o dónde lo tendría que poner (si iría a parte, la llamaría en el onsumbit del formulario....).
Es que con Xajax me lío un poco la verdad =(

[maycolalvarez]

xajax nunca hace un submit del formulario, serializa y envía los datos de mismo por medio de una petición AJAX, cuando usas xajax_nombreFuncionphp(xajax.getFormValues('namefo rm')), por lo tanto, podría validar con javascript los campos del formulario antes de ejecutar el comando xajax

[GatorV]

Tema movido desde PHP a AJAX

[madman_18]

Verás, tengo en el form, el evento onsubmit: ahí llamo a la función en javascript que me dice los campos si estan o no rellenos, pero cuando llamaría a la función en AJAX que me dibuja el circulo de carga¿¿¿???. Ohú qué lío tengo! jejeje.

EDITO:
Ya lo he logrado que me haga las 2 cosas a la vez! jejejeje. Es que estoy tonto, simplemente era en el onclick del botón para enviar el formulario la función en AJAX y en el onsubmit la función en JAVASCRIPT jejeje, ahora me muestra la imagen de loadign y también me comprueba las cosas en javascript.

Muchas Gracias por la ayuda maycolalvarez! y perdón por poner este tema al inicio en PHP jejeje ^^