iberck
11/28/2016 - 2:44 AM

Grails ajax jquery

Grails ajax jquery

grails-ajax-jquery.md
content_copyfile_download
  • Rendered
  • Source

Envío de un formulario por jquery/ajax (form)

<html>
<head xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <meta name="layout" content="adminlte">
    <script>
        $(document).ready(function () {
            $("#form1").submit(function (e) {
                $.ajax({
                    type: "POST",
                    url: "${g.createLink( action:'formSubmit')}",
                    data: $(this).serialize(), // serializa los elementos del form.
                    success: function (data) {
//                        $('#container').append(data); agrega al div
                        $('#container').html(data); // inserta al div
                    }, 
                    error:function (jqXHR, textStatus, errorThrown) {
                    }
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>

<g:form name="form1">
    <div id="container"></div>

    Nombre: <g:textField name="nombre" /><br/>
    Apellidos: <g:textField name="apellidos" /><br/>
    <g:submitButton name="enviar"/>
</g:form>

</body>

</html>

class TestController {

    def index() {
    }

    def formSubmit(String nombre, String apellidos) {
        // Aquí también se puede enviar un TEMPLATE o una VISTA:
        // render template: "X", model:[]
        // render view: "Y", model:[]
        render text: "respuesta ajax, nombre=${nombre}, apellidos=$apellidos"
    }
}

Jquery/Ajax js onclick que lanza evento webflow (a href)

Evento personalizado javascript que lanza una petición ajax con jquery hacia un evento webflow. Este método permite enviar más de 1 parámetro javascript al controlador.

<html>
<head xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <meta name="layout" content="adminlte">
    <script>
        function enviarAjax() {
            $.ajax({
                type: "POST",
                url: "${g.createLink( action:'formSubmit')}",
                data: {id: Math.random()}, // Datos que se envían al controlador/acción
                success: function (data) {
                    // $('#container').append(data); agrega al div
                    $('#container').html(data); // remplaza el contenido del div
                }, 
                error:function (jqXHR, textStatus, errorThrown) {
                }
            });
        }
    </script>
</head>

<body>

<a href="#" onclick="enviarAjax();">Enviar por ajax</a>
<div id="container"></div>

</body>

</html>

Note que en data se puede enviar N parámetros al controlador a diferencia de g:functionRemote que solo permite el envío de 1 parámetro

class TestController {

    def index() {
    }

    def formSubmit(String id) {
        // Aquí también se puede enviar un TEMPLATE, un
        render text: "Este es el id enviado=$id"
    }
}

Enviar link por jquery/ajax (JSON)

<html>
<head xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
    <meta name="layout" content="adminlte">
    <script>
        function enviarAjax() {
            $.ajax({
                type: "POST",
                url: "${g.createLink( action:'formSubmit')}",
                data: {id: Math.random()}, // Datos que se envían al controlador/acción
                success: function (json) {
                    var str = JSON.stringify(json, null, 2); // spacing level = 2
                    var result = eval(json);
                    var text = str + ": AEROPUERTO.ID=" + result.id + ", AEROPUERTO.NAME=" + result.nombre + ", AEROPUERTO.DIRECCIÓN=" + result.direccion
                    // $('#container').append(data); agrega al div
                    $('#container').html(text); // remplaza el contenido del div
                }
            });
        }
    </script>
</head>
<body>

<a href="#" onclick="enviarAjax();">Enviar por ajax</a>
<div id="container"></div>

</body>
</html>

import grails.converters.JSON
import org.springframework.security.access.annotation.Secured

class TestController {

    def index() {
    }

    def formSubmit(String id) {
        // Aquí también se puede enviar un TEMPLATE, un
        def aeropuerto = new Aeropuerto(id: id, nombre: "benito juarez", direccion: "afuera del metro puerto aereo")
        render aeropuerto as JSON
    }
}

class Aeropuerto {
    String id
    String nombre
    String direccion
}