Taglibs ajax en grails

Estos tags están marcados como deprecated porque insertan código inline lo cuál es considerado una mala práctica de programación por lo que serán eliminados en futuras versiones de Grails, sin embargo por su simplicidad son muy útiles. En lugar de estos tags Grails promueve el uso directo de jquery.

Nota: En grails 3 se pueden encontrar los tags de grails 2 y en el plugin ajax-tags.

Todos los ejemplos funcionan con el siguiente controlador:

class TestController {

    def index() {
        render view: "index"
    }

    def formSubmit(String nombre) {
        render text: "Nombre:$nombre"
    }
}

Nota: en vez de render text, se podría utilizar un render template.

FormRemote

Sirve para enviar un formulario por ajax.

<g:formRemote name="form1" url="[action: 'formSubmit']" update="updateMe">
    <g:textField name="nombre"/>
    <g:actionSubmit value="enviar" action="formSubmit"></g:actionSubmit>
</g:formRemote>
<div id="updateMe"></div>

Remote Link

Sirve para ejecutar una petición ajax al dar click en un link

<g:remoteLink action="formSubmit" update="updateMe" params="[nombre:'CGM']">Ajax link</g:remoteLink>
<div id="updateMe"></div>

SubmitToRemote

Sirve para enviar un formulario normal por ajax al presionar este botón de submit.

<g:form>
    <g:textField name="nombre"/>
    <g:submitToRemote url="[action: 'formSubmit']" update="updateMe" value="Enviar" />
</g:form>
<div id="updateMe"></div>

RemoteFunction

Sirve para invocar una función remota al lanzar cualquier evento de javascript.

<a href="#" onclick="${remoteFunction(action: "formSubmit", update: "updateMe", params: [nombre: "CRGM"])}">Ajax link</a>
<div id="updateMe"></div>

Enviándo el valor del control javascript:

<input type="number" id="nombre" name="nombre"
       onchange="${remoteFunction(action: "formSubmit", update: "updateMe", params: '\'nombre=\' + this.value')}" />

Nota: Si se desea enviar más de un parámetro, utilice directamente jquery/ajax.

RemoteField

Sirve para lanzar una petición ajax cada que el usuario teclee sobre la casilla.

<g:remoteField action="formSubmit" update="updateMe" name="nombre" paramName="nombre" />
<div id="updateMe"></div>

Ajax tags events

Todos los ejemplos se pueden personalizar para que cambien el comportamiento default de actualizar un div. Para ello hay que indicar la función onSuccess que reescriba el comportamiento:

<script>
function onAddHabitacion(data) {
    $('#reservaContainer').append(data);
}
</script>

<g:formRemote name="form1" url="[action: 'formSubmit']" onSuccess="onAddHabitacion(data);">
    <g:textField name="nombre"/>
    <g:actionSubmit value="enviar" action="formSubmit"></g:actionSubmit>
</g:formRemote>