Show spinner.gif in ajax call loading time in grails

Question

I am developing a web application in grails that uses a lot of ajax. I need to show a spinner.gif image while processing an ajax request. My gsp code example

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

In the above code, if we click on the link to the view files, it will update the ajax-area div.

Can someone show me how to update the ajax region of spinner.gif when loading ajax.

thanks

Answer 1

Assuming you are using Prototype, you can add something like this to the page (or layout) to show the counter:

<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>

It overwrites the contents of the ajax-area element when an Ajax call is initiated.

Answer 2

jQuery ( Grails jQuery):

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

Answer 3

: http://blog.oio.de/2010/11/08/how-to-create-a-loading-animation-spinner-using-jquery/