Ver Mensaje Individual
  #3 (permalink)  
Antiguo 29/11/2007, 09:27
Avatar de rol2007
rol2007
 
Fecha de Ingreso: mayo-2007
Ubicación: Santiasco CHILE
Mensajes: 300
Antigüedad: 17 años, 10 meses
Puntos: 4
Re: Formulario , Confirmación y Deshabilitar

Cita:
Iniciado por gvargas Ver Mensaje
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:VerdanaArialHelveticasans-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'parametersparametros });

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.
sacado desde ajax
__________________
Saludos
desde Chile