ajax - icon - loader gif blue

Mostrando spinner.gif en ajax llamada sobre tiempo de carga en grial

Question

Estoy desarrollando una aplicación web en griales que usa mucho ajax. Necesito mostrar una imagen de spinner.gif mientras proceso la solicitud de ajax. Mi ejemplo de código gsp es

<div id="ajax-area">
  <g:remoteLink action="list" controller="file" update="ajax-area">
    view files
  </g:remoteLink>
</div>

En el código anterior, si hacemos clic en el enlace de ver archivos, se actualizará el div ajax-area.

¿Podría alguien mostrarme cómo actualizar el área de Ajax con spinner.gif al cargar ajax?

Gracias

Answer 1

Suponiendo que usa Prototype, puede agregar algo como esto a la página (o el diseño) para mostrar un spinner:

<script type="text/javascript">
Ajax.Responders.register({
   onCreate: function() {
      if($(''ajax-area''))
         $(''ajax-area'').update(''<img src="${createLinkTo(dir:''images'',file:''spinner.gif'')}" border="0" alt="Loading..." title="Loading..." width="16" height="16" />'');
   }
});
</script>

Sobrescribe el contenido del elemento ''área ajax'' cuando se inicia la llamada Ajax.

Answer 2

Un enlace interesante sobre ese tema: http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/

Answer 3

Lo mismo para jQuery (esto en realidad estaba incluido en el plugin jQuery de Grails):

$(document).ready(function() {
    $("#spinner").bind("ajaxSend", function() {
        $(this).fadeIn();
    }).bind("ajaxComplete", function() {
        $(this).fadeOut();
    })}
);