Original Source

Christopher M Judd describes how to enable a simple ajaxy feature that every web 2.0 site needs theses days: a background operation feedback animation icon. Given that Grails is an open source project built on open source projects it is no surprise that it relies in the popular Prototype/Script.aculo.us pair to achieve this task. With all things Grails, getting this feature to work is pretty straight forward, as Christopher shows.

For standard page requests, browsers use an animated icon as an indicator to the user that the browser is waiting for the request to complete. However, for AJAX calls that are initiated via JavaScript in a separate thread the browser icon does not animate. So, typically the application developers use an animated icon within the page to notify the user the page is waiting for a request to complete. In an effort to simplify web development Grails automatically includes an animated spinner icon when using the Prototype or script.acolo.us AJAX frameworks.

To enable the Grails AJAX spinner you must include the Prototype or script.acolo.us JavaScript typically using the <g:javascript library=”prototype”></g:javascript> or <g:javascript library=”scriptaculous”></g:javascript>. But these declarations can not be included just any place within your page. These declarations must come before the tag since it includes the application.js file that registers the spinner with Prototype and requires Prototype variables to be available.

Christopher outlines the current options either using the standard layout (the available one when you generate views or use scaffolding) or when a custom layout is used. You may find the required GSP code at this link.

Tags: AJAX, Christopher M Judd, Grails