¿La interfaz de usuario del bloque Jquery no funciona cuando se usa dos veces?

Estoy usando el complemento jquery block UI, mi requisito es verificar si el usuario es un usuario autorizado o no, aquí está mi código

<script language="javascript" type="text/javascript">

        $(document).ready(function () {
            $('#btnsubmit').click(function () {
                $.blockUI({ css: {
                    border: 'none',
                    padding: '15px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#fff'
                }
                });
            });
        }); 

     function ajaxAuth() {
       //UserLogin.IServiceLogin.HelloWorldCC(OnSuccess, OnFailure);
         var usrname = document.getElementById('txtusrname').value;
         var pasd = document.getElementById('txtpassword').value;
         UserLogin.IServiceLogin.GetUseCred(usrname, pasd, onSuccess, onFailed);
     }

     function onSuccess(result) {
         setTimeout($.unblockUI, 0);
         var obj = jQuery.parseJSON(result);

         if (obj.name != "error" ) {
             document.getElementById('labusr').value = obj.name;
             document.getElementById('labpass').value = obj.passd;
             document.getElementById('labkey').value = obj.key;
             location.href = "DesignAPage.aspx";
         } else {
             $.blockUI({ message: $('#question'), css: { width: '350px'} });

//             $('#ok').click(function () {
//                 $.unblockUI();
//                 return false;
//             }); 
         }
     }

     function onFailed(result) {
         alert("failure");
     }

    </script>

entonces el problema es mientras estoy usando $.blockUI({ message: $('#question'), css: { width: '350px'} }); simplemente bloquea la pantalla por un segundo y desbloquea la pantalla.

Cualquier ayuda es muy apreciada

preguntado el 22 de mayo de 12 a las 16:05

Pruebe con unblockUI antes de blockUI, puede ayudar. -

3 Respuestas

El problema está siendo causado por setTimeout($.unblockUI, 0);. Aunque podría pensar que llamar a esto haría que el código de la función adjunta se ejecutara inmediatamente, no es así. Puede verificar esto ejecutando lo siguiente:

setTimeout(function() {
    console.log('one');
}, 0);
console.log('two');

two se registra antes one. El razonamiento de esto está en la forma en que JavaScript maneja los temporizadores internamente. Dado que es de un solo subproceso, nunca nada se ejecuta al mismo tiempo. Pasando 0 milisegundos a setTimeout simplemente obligará a la función a ejecutarse en el primer momento disponible. En este caso eso es justo después $.blockUI se llama.

John Resig tiene un buen escrito sobre esto en http://ejohn.org/blog/how-javascript-timers-work/.

contestado el 22 de mayo de 12 a las 17:05

intenta hacer esto en el bloque else

else {
             $.unblockUI({
                 onUnblock: function () {
                     $.blockUI({ message: $('#question'), css: {
                         border: 'none',
                         padding: '15px',
                         backgroundColor: '#000',
                         '-webkit-border-radius': '10px',
                         '-moz-border-radius': '10px',
                         opacity: .5,
                         color: '#fff'
                     }
                     });
                     $('#ok').click(function () {
                         $.unblockUI();
                         return false;
                     }); 
                   }
             }); 
         }

contestado el 22 de mayo de 12 a las 18:05

Corté un poco tu código, pero esto está funcionando.

$(document).ready(function() {
$.blockUI({ css: { 
    border: 'none', 
    padding: '15px', 
    backgroundColor: '#000', 
    '-webkit-border-radius': '10px', 
    '-moz-border-radius': '10px', 
    opacity: .5, 
    color: '#fff' 
    } 
    }); 

    onSuccess();

});

function onSuccess() { 
$.unblockUI();

$.blockUI({ message: "Some message", css: { width: '350px'} }); 

} 

contestado el 22 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.