Cómo usar los callBacks de prototype??

[gvargas]

Saludos foreros.

Mi pregunta es la siguiente:

Tengo un archivo .js donde tengo todas las funciones que usan Ajax en mis paginas, para cada petición con ajax dispongo un Div con position:fix en la esquina superior derecha para mostrar un gif animado y un mensaje para avisar al usaurio que se está haciendo una petición al Servidor de manera asincrona.

Para lograr el efecto uso, onLoading y onComplete pero en muchas ocaciones, por alguna razon se queda el div encendido, aunque la petición ya haya finalizado.

Acabo de leer información sobre el uso de ciertos Responders de Prototype para controlar de manera eficiente el encendido y apagado de este DIV.

Código PHP:

  /* Javascript: se define un objeto con callbacks globales */ 
var globalCallbacks = { 
                onCreate: function(){ 
                        $(‘cargando’).show(); 
                }, 
  
                onComplete: function() { 
                        if(Ajax.activeRequestCount == 0){ 
                                $(‘cargando’).hide(); 
                        } 
                } 
        }; 
 
/* Se registran los callbacks en Ajax.Responders */ 
 
Ajax.Responders.register( globalCallbacks );  
   

Mas info en: http://www.estadobeta.com/2006/10/10/prototype-ajax/

El problema es que al ejecutarlo la consola de errores de firefox me informa que esa ultima linea no esta definida.

¿Alguien tiene clara la forma de utilizar estos Responders?

Un saludo.

[gvargas]

Ok. ya lo he resuelto y van de maravilla.

Realmente se pueden hacer cosas grandiosas !!!!

Saludos

[vicman]

podrias poner la respuesta?
como lo hiciste?

[gvargas]

Ok.

En mi archivo general.js

Código PHP:

  var globalCallbacks = { 
    onCreate: function(){$('status').style.display = 'block';}, 
    onComplete : function(){ 
        if (Ajax.activeRequestCount == 0){ 
            $('status').style.display = 'none'; 
        } 
    } 
};  
   

En el HEADER de mi archivo ejem.php

Código PHP:

  <header> 
<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript" src="general.js"></script> 
<script language="javascript" type="text/javascript"> 
       Ajax.Responders.register(globalCallbacks); 
</script> 
</header>  
  

Ahora en ese mismo archivo pongo un div ..... lo hago despuesito del body, pero realmente puede ir en cualquier parte del body ya que la disposición la controlo con CSS.

Código PHP:

  <div class="msgStatus" id="status"><center><img src='/site/img/ajax-loader.gif' border='0' align='absmiddle'> Procesando tu solicitud.</center></div>  
   

Y finalmente el archivo CSS con la clase que hace posible su ubicación y aspecto.

Código PHP:

  .msgStatus    { 
    position: fixed; 
    top: 1px; 
    right:1px; 
    border: 1px solid  #FEEB9D; 
    background-color: #FEEB9D; 
    color: #333333; 
    font-family:Verdana, Arial, Helvetica, sans-serif;  
    font-size:12px;     
    width: auto; 
    height: auto; 
    display:none; 
}  
   

Y listo, puede parecer muy simple pero logro asegurarme siempre del momento definitivo en que finaliza mi petición por AJAX.

Ahora, con esto solo controlo el encendido y apagado de mi indicador de progreso pero se pueden hacer mucho más cosas... que ya estoy desarrollando.

Un saludo

[gvargas]

Además... como dicen en algunos blogs, este comportamiento se ve muy 'cool', y sí, nada que envidiar al Gmail o al Hotmail Live.

Nota: Esto funciona bien en IE 7, FireFox (creo que en cualquier versión), Netscape (yo tengo la ultima versión y funciona bien) . En IE 6.0 no logro hacer que el DIV "flote" siempre, cuando aparece desplaza al resto de la pagina hacia abajo y cuando desaparece el contenido se desplaza hacia arriba.... se ve fatal.

Si alguien puede corregir eso en el CSS, pues fabuloso