Jquery block UI not working when used twice? - jquery-ui

Question

I am using jquery block UI plugin, my requirement is to check if user is authorized user or not, here is my code
<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>
so the problem is while i am using $.blockUI({ message: $('#question'), css: { width: '350px'} }); it just blocks the screen for a second and unblocks the screen.
Any help is greatly appreciated

Answer 1

The problem is being caused by setTimeout($.unblockUI, 0);. Even though you might think that calling this would cause the code to attached function to run immediately, it does not. You can verify this by running the following:
setTimeout(function() {
console.log('one');
}, 0);
console.log('two');
two is logged before one. The reasoning for this is in the way JavaScript handles timers internally. Since it is single threaded, nothing ever runs concurrently. Passing 0 milliseconds to setTimeout will just force the function to run at the first available moment. In this case that's right after $.blockUI is called.
John Resig has a nice write up on this at http://ejohn.org/blog/how-javascript-timers-work/.

Answer 2

try doing this in else block
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;
});
}
});
}

Answer 3

I chopped your code up a bit but this is working.
$(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'} });
}