JQuery BlockUI blocking message does not immediately show

Question

I have the following code an .net mvc aspx page ...

//////////////////////

$.blockUI({ message: '

Processing ... Please Wait

' });

var registerOk = registerNewUser(); var createUserSubscriptionOK = createUserSubscription();

$.unblockUI();

\\\\\\\\\\\\

The block message does not show until just around the time that the 2nd function finishes. Both functions gather form data then make asynch calls to the db.

I need the message to show immediately, have both functions fire, then once both are completed, the ui gets unblocked ...

How do I do this?

Thanks for any feedback.

Answer 1

Hi I don't have an answer for this, but I just wanted to report that I am seeing the same problem in firefox 3.5.9.

I am trying to use blockUI to show a wait message with an animated gif while the server processes the information sent through a form.

Inside the $("#form").submit(function() { first I call blockUI: $.blockUI({ message: -image here- Processing your request, please wait...' });

Then I prepare the data to be sent to the server and post them with an ajax synchronous call: $.ajax({ type: "POST", url: '/submitForm/'+typeName, data: postdata+"&"+sData, cache: false, async: false });

and in the end I unlock $.unblockUI();

I noticed that it works with Konqueror (in KDE4), it shows the wait window with the animated gif darkening the background and it disappears at the end.

So the problem might be related to firefox, or maybe to some misconfiguration that does not affect that particular browser.

I hope this information is useful to some expert in figuring out what the actual problem is.

I would also be thankful for any feedback.

EDIT:

Hello,

I don't know if this is still relevant, but in the end I managed to make it work. The problem was that I was doing a synchronous call with ajax (the "async: false" bit in the submitForm call). BlockUI is thought to make an asynchronous call work as if it was synchronous, i.e. blocking the interface. If the call is already synchronous there is no need to block the ui, because that's the normal behavior of synchronous calls!

So for me, just removing the "async: false" part made it work.

I hope this helps.

Answer 2

Try eliminating the async behavior of blockUI by setting fadeIn to 0:

$.blockUI({ message: $('#domMessage'), fadeIn: 0 });