Java Developer

Grails AJAX tutorial - formRemote and submitToRemote tags

The tag formRemote is easy to use. If you have an existing form that is not using AJAX, it can easily be converted without requiring any change in controller code.

Example Non-AJAX Form

MathController.groovy

package tutorial
class MathController {
    def add() { }
    def sum(int a, int b) {
        [a:a, b:b, sum:a+b]
    }
}

add.gsp

<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main"/>
        <title>Sum</title>
    </head>
    <body>
    <h3>Sum</h3>
    <g:form controller="math" action="sum">
        <label for="a">First Number</label><g:textField name="a"/><br/>
        <label for="b">Second Number</label><g:textField name="b"/><br/>
        <g:submitButton name="Get The Sum"/>
    </g:form>
    </body>
</html>

sum.gsp

<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main"/>
        <title>Sum</title>
    </head>
    <body>
    <h3>Answer</h3>
    ${a} + ${b} = ${sum}
    </body>
</html>

It would look like this:

And after submitting form

AJAX Example using formRemote

This is an equivalent example of the above implemented using formRemote.

MathController.groovy

package tutorial
class MathController {
    def subtract() { }
    def difference(int a, int b) {
        [a:a, b:b, difference:a-b]
    }
}

subtract.gsp
<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main"/>
        <title>Subtract</title>
        <g:javascript library="jquery"/>
    </head>
    <body>
    <p>This text should remain and unaffected because the form below will use AJAX</p>
    <div id="subtraction">
        <g:render template="/math/subtractForm"/>
    </div>
    </body>
</html>
In the form, we added a paragraph that should still be there even after form submit, to validate the AJAX invocation. You may or may not factor out the form in another file. I prefer to factor out for flexibility.

_subtractForm.gsp

<h3>Subtract</h3>
<g:formRemote name="subForm" url="[controller:'math', action:'difference']" update="subtraction">
    <label for="a">First Number</label><g:textField name="a"/><br/>
    <label for="b">Second Number</label><g:textField name="b"/><br/>
    <g:submitButton name="Get The Difference"/>
</g:formRemote>

difference.gsp

<h3>Answer</h3>
${a} - ${b} = ${difference}

And testing it proves the AJAX call:

AJAX Example using submitToRemote

This is another equivalent example, but using submitToRemote instead.

MathController.groovy

package tutorial
class MathController {
    def multiply() { }
    def product(int a, int b) {
        [a:a, b:b, product:a*b]
    }
}

multiply.gsp
<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="main"/>
        <title>Multiply</title>
        <g:javascript library="jquery"/>
    </head>
    <body>
    <p>This text should remain and unaffected because the form below will use AJAX</p>
    <div id="multiplication">
        <g:render template="/math/multiplyForm"/>
    </div>
    </body>
</html>
Again, we are factoring out the form.

_multiplyForm.gsp

<h3>Multiply</h3>
<g:form>
    <label for="a">First Number</label><g:textField name="a"/><br/>
    <label for="b">Second Number</label><g:textField name="b"/><br/>
    <g:submitToRemote url="[controller:'math', action:'product']" update="multiplication" value="Get The Product"/>
</g:form>

product.gsp

<h3>Answer</h3>
${a} * ${b} = ${product}

And testing it proves the AJAX call also works:

NOTES
Above are simple examples of how you can convert a non-AJAX form using any of the two built in AJAX tags of Grails. This can be used as starting point for further experimentation with the tags.
You can checkout the source code for this example here or download the zip file here.
List of Grails AJAX Tutorials

Tags: ajax, formRemote, grails, submitToRemote, tag