mootools

[ira]

Buenas,

Tengo el tipico formulario que envia datos a una pagina, en esta pagina inserto esos datos en una bd y al terminar el insert nos redirije a otra pagina, y la verdad es que me gustaria cambiar este proceso.
Todo esto viene a raiz de que he cambiado la navegacion de la web, al principio era lo tipico que al clickear en un enlace del menu cargaba una pagina nueva, ahora en vez de cargar la pagina por completo lo que hago es actualizar un div con el contenido de la nueva pagina...
Creo que lo ideal seria que cuando el usuario envia el formulario se abriese el tipico lightbox mostrando el estado del insert en la bd, con el tipico icono de cargando y una vez se haya terminado el insert se cierre el lightbox y nos cargue el contenido de la nueva pagina en un div...

He estado buscando y no se si el JSON es lo que me hace falta realemente para esto...

Se os ocurre o conoceis que parte de la doc o algun ejemplo de como se hace esto???

Gracias de antemano un saludo

[ira]

Era mas facil de lo que creia al fina lo he solucionado de esta manera:
Lo dejo por si veis algun fallo y pr si le hace falta a alguien.

Código Javascript:

var myform = document.id('form');
    var envio = form.getElementById('envio');
    var validator = new Form.Validator(myform, {
        evaluateOnSubmit: false
    });
    myform.addEvent('submit', function(e) {
        if (aqui condicion requerida) {
            e.stop();
            // Salta mensaje aviso no todo ok
            return;
        }
        if (!validator.validate()) {
            e.stop();
            return;
        }
        e.stop();
        // creo un elemento que sera la transparencia negra
        var black = new Element('div', {
            style: 'display: block; width: 100%; height: 100%; background-color: #000; z-index: 666; position: absolute;'
        }).injectInside(cont);
        black.setStyles({
            opacity: 0.7
        });
        // creo el popup
        var popup = new Element('div', {
            style: 'display: block; width: 350px; height: 150px; background-color:#000000; -moz-border-radius:5px 5px 5px 5px; border:1px solid #4C4F54; z-index: 1000; position: absolute; margin: 300px 0 0 215px;'
        }).injectInside(cont);
        // aqui va el tipico loading y el mensaje
        var loading = new Element('div', {
            style: 'display: block; width: 220px; height: 20px; background:url(../img/loading.gif) no-repeat; margin: 40px auto; text-align:center; line-height:60px; color:#FFFFFF;',
            text: 'Uploading DataBase'
        }).injectInside(popup);
        
 
    this.set('send', {
       // recojo mensaje que todo ha salido bien y redirijo a otra pagina
        onComplete: function(resp) {
            loading.set('html', resp);
            document.id('container').load('xxxxx.php');
        }
    });
    //envío el formulario
    this.send();
});
 

Saludos