Pregunta: ¿Cómo muestro un gif animado con el mensaje "cargando..." mientras se procesa la respuesta con AJAX?
Respuesta: Este ejemplo es muy similar al efecto que hace gmail cuando se borra o carga un correo. (un mensaje en la ezquina superior derecha)
yo le he puesto ademas un gif animado para indicar el progreso.
Primero el código CSS:
Código PHP:
.msgStatus {
position:fixed;
top:1px;
right:1px;
border:1px solid #FF6600;
background-color:#FEEB9D;
color:#333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
width:auto;
height:auto;
display:none;
}
Ahora el HTML de la página donde se hará uso del efecto.
Código PHP:
<!--Esto en el header de la pagina -->
<script language="javascript" type="text/javascript">
Ajax.Responders.register(globalCallbacks);
</script>
<!--Esto dentro del body -->
<div class="msgStatus" id="status"><center><img src='img/ajax-loader.gif' border='0' align='absmiddle'>Procesando tu solicitud.</center></div>
Yo uso el siguiente gif:
http://mypage.bluewin.ch/yuppi/image...jax-loader.gif
Ahora la solicitud por AJAX.
Código PHP:
// Generalmente tenemos un archivo .js con las funciones javascript/ajax, poner esto
var globalCallbacks = {
onCreate: function(){$('status').style.display = 'block';},
onComplete : function(){
if (Ajax.activeRequestCount == 0){
$('status').style.display = 'none';
}
}
}
// despues de esto hacer cualquier petición con ajax por ejemplo:
function MiFuncionAjax(list_params){
var parametros = 'parametros=' + list_params;
new Ajax.Request('script.php', {method: 'post', parameters: parametros });
}
Y ya!
¿Cómo funciona? La variable globalCallbacks contiene dos funciones anonimas onCreate y onComplete, cuando el objeto ajax se crea el div se activa, y con onComplete se oculta.
Para que esto funcione se debe de colocar en el header de la pagina el responder: Ajax.Responders.register(globalCallbacks); que constatemente monitorea el comportamiento de la pagina, cuando se detecta que hay una petición Ajax pues le avisa a globalCallbacks que hay trabajo que hacer
Hecho esto, practicament cualquier petición hecha con ajax es detectada y proceso visual con el div hace el resto.
Nota: Esto funciona usando Prototype.