Grails Cookbook - A collection of tutorials and examples

Grails AJAX Tag - remoteField Example

AJAX is simple to implement in Grails. There are several tags that are powerful enough to do most AJAX needs:
  • remoteLink
  • remoteFunction
  • remoteField
  • formRemote
  • submitToRemote
The remoteField tag (<g:remoteField>) renders a plain textbox. When the value changed, the value is sent back to the server for processing.
WARNING: Since Grails 2.4.X AJAX related tags are deprecated.

Parameters

Here are some of the important parameters to remoteField tag:
  • controller - the controller to invoke
  • action - the action to invoke in the specified controller
  • update - the id of the HTML component to update with the response from the server

Example


Here is an example controller, that just echoes back the value passed to it:
package asia.grails.ajaxTest
class GreetingsController {
  def index() {}
  def welcome() {
    def message = params.value
    render "Welcome ${message}"
  }
}

And here is a sample GSP code that uses remoteField tag to invoke the action's controller:

<!DOCTYPE html>
<html>
  <head>
    <meta name="layout" content="main"/>
    <title>Simple Ajax</title>
    <g:javascript library="jquery"/>
  </head>
  <body>
    <div id="greetingsBox"></div>
    <g:remoteField controller="greetings" 
       action="welcome" update="greetingsBox"/>
  </body>
</html>

When the user types into the text box, an AJAX request is sent to GreetingsController's welcome message. The value is stored in params.value.
The result rendered will be displayed in greetingsBox because of the code segment update="greetingsBox". For example, if the contents of the text box is "John", the contents of the div will be "Welcome John"

Other Grails Tag Examples


Tags: Grails Tag, remoteField