Question

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.