Showing spinner.gif in ajax call on loading time in grails

Question

Hi I am developing a web application in grails which uses lot of ajax.I need to show a spinner.gif image while processing the ajax request.My sample gsp code is

<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 view files link it will update the ajax-area div.

Could some one show me how to update the ajax-area with spinner.gif on loading ajax.

Thanks

Answer 1

Assuming that you use Prototype, you can add something like this to the page (or the layout) to show a 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>

It overwrites the content of the 'ajax-area' element when the Ajax call is initiated.

Answer 2

The same for jQuery (this was actually bundled in the Grails jQuery plugin):

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