8.6.1 Ajax Support 2.4.4

See the light - agile, industrial strength, rapid web application development made easy

(Quick Reference) # 8.6.1 Ajax Support - Reference Documentation Authors: Graeme Rocher, Peter Ledbrook, Marc Palmer, Jeff Brown, Luke Daley, Burt Beckwith, Lari Hotari Version: 2.4.4 ## Table of Contents ## 8.6.1 Ajax Support By default Grails ships with the jQuery library, but through the Plugin system provides support for other frameworks such as Prototype, , 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 ## 8.6.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`. ## 8.6.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. ## 8.6.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>
## 8.6.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 `onERROR_CODE` - The JavaScript function to call to handle specified error codes (e.g. `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>
| Quick Reference (hide)