Your problem is that you are using an AJAX synchronous call and almost block the browser until it finishes. In particular, the browser will not be able to show your βdownloadβ message before you press the lock $.ajax({async:false}) ; for example, see what this does:
http://jsfiddle.net/ambiguous/xAdk5/
Please note that the button doesnβt even go back to the unencrypted visual state while AJAX is running?
The solution is to show your boot message, manually control it back to the browser and then block everything with your synchronous remote call. One way to do this is to use setTimeout with a delay of 0:
$('#_info').html(myInfo); $('#_info').show(); setTimeout(function() { $.ajax('save', { async: false, type: 'POST', complete: function() { $('#_info').hide(); } }); }, 0);
For example: http://jsfiddle.net/ambiguous/zLnED/
Of course, some caution will be required since this will not be the same in the setTimeout callback since it was outside, but this is easy to take care of.
Using async:false is not a good thing for your users, but you should try to avoid this if it is absolutely necessary (and this rarely happens).
source share