(Quick Reference)

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" />

You can replace 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>

The above link sends an asynchronous request to the 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"
}

GSP code:

<div id="message"></div>
<g:remoteLink action="delete" id="1" update="message">
Delete Book
</g:remoteLink>

The above example will call the action and set the contents of the 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>

Here the 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 >

Or alternatively you can use the submitToRemote tag to create a submit button. This allows some buttons to submit remotely and some not depending on the action:

<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>

The above code will execute the "showProgress()" function which may show a progress bar or whatever is appropriate. Other events include:

  • onSuccess - The JavaScript function to call if successful
  • onFailure - The JavaScript function to call if the call failed
  • on_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 initialise
  • onLoading - The JavaScript function to call when the remote function is loading the response
  • onLoaded - The JavaScript function to call when the remote function is completed loading the response
  • onComplete - The JavaScript function to call when the remote function is complete, including any updates

You can simply refer to the 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>