7.7.1 Ajax Support - Reference Documentation
Authors: Graeme Rocher, Peter Ledbrook, Marc Palmer, Jeff Brown, Luke Daley, Burt Beckwith, Lari Hotari
Version: 2.3.8
7.7.1 Ajax Support
By default Grails ships with the jQuery library, but through the Plugin system provides support for other frameworks such as Prototype, Dojo:http://dojotoolkit.org/, Yahoo UI:http://developer.yahoo.com/yui/ and the Google Web Toolkit.This section covers Grails' support for Ajax in general. To get started, add this line to the<head>
tag of your page:<g:javascript library="jquery" />
jQuery
with any other library supplied by a plugin you have installed. This works because of Grails' support for adaptive tag libraries. Thanks to Grails' plugin system there is support for a number of different Ajax libraries including (but not limited to):
- jQuery
- Prototype
- Dojo
- YUI
- MooTools
7.7.1.1 Remoting Linking
Remote content can be loaded in a number of ways, the most commons way is through the remoteLink tag. This tag allows the creation of HTML anchor tags that perform an asynchronous request and optionally set the response in an element. The simplest way to create a remote link is as follows:<g:remoteLink action="delete" id="1">Delete Book</g:remoteLink>
delete
action of the current controller with an id of 1
.
7.7.1.2 Updating Content
This is great, but usually you provide feedback to the user about what happened:def delete() {
def b = Book.get(params.id)
b.delete()
render "Book ${b.id} was deleted"
}
<div id="message"></div> <g:remoteLink action="delete" id="1" update="message"> Delete Book </g:remoteLink>
message
div
to the response in this case "Book 1 was deleted"
. This is done by the update
attribute on the tag, which can also take a Map to indicate what should be updated on failure:<div id="message"></div> <div id="error"></div> <g:remoteLink update="[success: 'message', failure: 'error']" action="delete" id="1"> Delete Book </g:remoteLink>
error
div will be updated if the request failed.
7.7.1.3 Remote Form Submission
An HTML form can also be submitted asynchronously in one of two ways. Firstly using the formRemote tag which expects similar attributes to those for the remoteLink tag:<g:formRemote url="[controller: 'book', action: 'delete']" update="[success: 'message', failure: 'error']"> <input type="hidden" name="id" value="1" /> <input type="submit" value="Delete Book!" /> </g:formRemote >
<form action="delete"> <input type="hidden" name="id" value="1" /> <g:submitToRemote action="delete" update="[success: 'message', failure: 'error']" /> </form>
7.7.1.4 Ajax Events
Specific JavaScript can be called if certain events occur, all the events start with the "on" prefix and let you give feedback to the user where appropriate, or take other action:<g:remoteLink action="show" id="1" update="success" onLoading="showProgress()" onComplete="hideProgress()">Show Book 1</g:remoteLink>
onSuccess
- The JavaScript function to call if successfulonFailure
- The JavaScript function to call if the call failedon_ERROR_CODE
- The JavaScript function to call to handle specified error codes (eg on404="alert('not found!')")onUninitialized
- The JavaScript function to call the a Ajax engine failed to initialiseonLoading
- The JavaScript function to call when the remote function is loading the responseonLoaded
- The JavaScript function to call when the remote function is completed loading the responseonComplete
- The JavaScript function to call when the remote function is complete, including any updates
XMLHttpRequest
variable to obtain the request:<g:javascript> function fireMe(event) { alert("XmlHttpRequest = " + event) } } </g:javascript> <g:remoteLink action="example" update="success" onFailure="fireMe(XMLHttpRequest)">Ajax Link</g:remoteLink>