jQuery blockUI plugin not working in ASP.NET submit validator Chrome/IE9

Question

I am using jquery ajax within an asp.net CustomValidator to query the server. Because this can take some time I am attempting to block the UI with a message using BlockUI.

However its not working in Chome & IE9. The display is not blocked until the ajax call completes, and it is then cleared straight away. I have set the fade-in setting to 0. It does work in Firefox, and it does work in Chrome if I put a breakpoint on the line that blocks the display then step through it.

Now the same code works fine when attached to a click event of a button. So I am guessing that the issue is related to either being inside the submit event or being inside the asp.net validation chain called by the submit event. Although the fact that it works when stepping through the code may imply a timer lurking within somewhere.

However knowing that hasn't allowed me to resolve the issue - so if anyone can assist it would be much appreciated.

Answer 1

OK, the problem was actually using a synchronous ajax call which I have since discovered stops any browser activity including display updates! I wouldn't normally use a synchronous ajax call but in this case because its in a validator it needs to block the form submission.

This thread discussed the various options available to solve the real problem :)

How do I do a jQuery blocking AJAX call without async = false?

Further note, trying to call service-side validation via ajax during the submit process is actually a flawed design unless one is prepared to build the necessary state machine to cancel the submit process then block the UI until the ajax returns then continue the submit process or not.