Judd Solutions: Enabling the AJAX Spinner in Grails

Sunday, August 10, 2008

Enabling the AJAX Spinner in Grails

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 or tags. 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.

If you are using the default layout found in main.gsp, you can declare the Prototype or script.acolo.us inclusions in one of two places. You can either make the declarations in the header section of an individual view such as in this example:


<head>
<title>Make and Model</title>
<meta equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="layout" content="main">
<g:javascript library="scriptaculous"/>
</head>

Or in the header section of the main.gsp prior to the application declaration such as in this example.


<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}" />
<link rel="shortcut icon" href="${createLinkTo(dir:'images',file:'favicon.ico')}" type="image/x-icon" />
<g:layoutHead />
<g:javascript library="scriptaculous" />
<g:javascript library="application" />
</head>

If you are not using the standard layout just make sure you put the Prototype or script.acolo.us tag prior to the application tag and include the following or similar div tag found in the default layout.


<div id="spinner" class="spinner" style="display:none;">
<img src="${createLinkTo(dir:'images',file:'spinner.gif')}" alt="Spinner" />
</div>

Judd Solutions

Sunday, August 10, 2008

Enabling the AJAX Spinner in Grails

No comments:

AWS EC2 Hibernate Java SDK v2 Example