Bloquear div mientras se recibe información.

neodani · #1 (**permalink**) 05/04/2011, 02:50

Buenos días,

¿Sabéis como puedo hacer para bloquear un div mientras se recibe nueva información en él?

Ejemplo practico.
Un formulario que el usuario rellena y pulsa el boton enviar, me gustaria que todo el formulario se
viese "bloqueado" mientras se envia (ej. tarda 5 segundos en recibir respuesta del script que lo procesa) que durante esos 5 segundos el usuario no pudiese hacer clic
en ningun elemento del formulario incluido el boton enviar.

Lo he visto en alguna ocasión, sobre todo en peticiones ajax, que la capa en cuestión se oscurece hasta que vuelve a estar operativa.

Otro ejemplo donde también lo ví sería el de una paginación o tabs,
en el div hay información se pulsa sobre una pestaña y la pestaña actual se oscurece hasta que se recibe respuesta del servidor para mostrar el nuevo contenido.

¿Sabéis como conseguirlo?

Muchas gracias de antemano

Dany_s · #2 (**permalink**) 05/04/2011, 06:20

se logra con un div transparente encima del form, algo asi

Código HTML:

Ver original<html>
    <head>
        <title>Ejemplo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
        <script>
 
        $(function(){
 
            $('form').submit( function(){
                //Agregar un div al principio del form
                capa = $('<div class="capaTransparente">').prependTo(this);
                //Le doy opacidad
                capa.animate({'opacity': 0.5});
                //Alguna operacion ajax
                $.get('dos.jsp', function(){
                    //Cuando termina la solicitud le doy opacidad 0
                    capa.animate({'opacity': 0}, function(){
                        //Cuando termina la animacion borro el div
                        $(this).remove();
                    })
                });
 
                return false;
            });
 
        });
 
        </script>
        <style>
 
            form{margin:100px; position:relative; width:250px; height:150px}
            .capaTransparente{position:absolute; height:100%; width:100%; background:#ccc; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;}
 
        </style>
    </head>
    <body>
 
    <form>
 
        <select>
            <option>1</option>
        </select>
        <input type="text">
        <input id="enviar" type="submit" value="Enviar">
    </form>
 
 
    </body>
</html>

fijate nomas el css que funcione

neodani · #3 (**permalink**) 27/04/2011, 15:43

Buenas,

Al final encontré el jquery blockUI que bloquea la pantalla o incluso un div concreto. En mi caso quiero bloquear el div que contiene el formulario mientras se procesa la petición. Esto lo consigo de la siguiente manera.

Código Javascript:

Ver original$(document).ready(function() {
        $('#contactar').submit( function(){ 
             $('div#form_contactar').block({ 
                message: $('#msgEspera'),
               css: {   border: '0px',
                        backgroundColor:'transparent'
                    },
                overlayCSS:  { 
                                backgroundColor: '#D5D3D6', 
                                opacity:         0.6 
                            }
            }); 
        }); 
    });

El problema que tengo es que mi formulario tiene validaciones JS con jquery.validate

Código Javascript:

Ver original$("#contactar").validate({
        rules:{
            nombre:{required:true,minlength: 3},
            email:{
                email:true,
                required:true,
            },
            departamento:{required:true},
            asunto:{required:true,minlength: 5},
            mensaje:{required:true,minlength: 10},
 
            captcha:{required:true,minlength: 6},
        },
        messages:{
            nombre:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Demasiado corto {0} caracteres mínimo")
            },
            email:{
                email:"El correo no es válido",
                required:"Campo obligatorio"
            },
            departamento:{
                required:"Campo obligatorio"
            },
            asunto:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Demasiado corto {0} caracteres mínimo")
            },
            mensaje:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Demasiado corto {0} caracteres mínimo")
            },
            captcha:{
                required:"Campo obligatorio",
                minlength: jQuery.format("Mínimo {0} caracteres")
            },
        }
    });

Al tener estas validaciones y al estar declarado que cuando se hace el submit bloqueé el div, me está bloqueando aunque no hayan pasado satisfactoriamente las validaciones, es decir, estando vacio el formulario si pulso enviar, me saltan las validaciones bien pero me bloquea el formulario.

Lo ideal sería que no bloquease el formulario hasta que las validaciones esten correctas y validadas, solo entonces que permita enviar el formulario y se bloquee el div.

¿Sabéis cómo debo hacerlo?

Muchas gracias de antemano!

neodani · #4 (**permalink**) 29/04/2011, 13:58

Al final he encontrado la forma, por suerte la función de jquery.validate tiene un metodo para saber si el formulario cumple con todas las validaciones

$("#contactar").valid()

Por lo que finalmente el codigo JS me quedó así

Cuando se pulsa el botón enviar del fomulario contactar compruebo que se hayan pasado todas las validaciones, si es así es TRUE el condicional, despues bloqueo toda capa del formulario contactar y muestro el mensaje de espera.

Código Javascript:

Ver original$(document).ready(function(){
    $("#contactar").submit(function() {
        if($("#contactar").valid()){
            $('div#form_contactar').block({ 
                message: $('#msgEspera'),
                css: {  border: '0px',
            },
            overlayCSS:  { 
                backgroundColor: '#D5D3D6', 
                opacity:         0.6 
            }
            });
        }
    });
});

Saludos!