What is the easiest way to disable an entire HTML page until an initial .load call is plete? What I mean by disable is the user can not interact with it in any way. It is ok for them to navigate away.

I am using jQuery 1.2.6. Is it to set the call to be sync instead of async? how do you set options for this on the .load function?

UPDATE
this seems to be working - am I off base?

function doSomething() {
     $.ajaxSetup({ async: false });
     $('#someArea').load('... args ...');
     $.ajaxSetup({ async: true });
}

What is the easiest way to disable an entire HTML page until an initial .load call is plete? What I mean by disable is the user can not interact with it in any way. It is ok for them to navigate away.

I am using jQuery 1.2.6. Is it to set the call to be sync instead of async? how do you set options for this on the .load function?

UPDATE
this seems to be working - am I off base?

function doSomething() {
     $.ajaxSetup({ async: false });
     $('#someArea').load('... args ...');
     $.ajaxSetup({ async: true });
}

• javascript
• jquery
• html
• ajax
• asynchronous

• will this only work in some browsers? – BuddyJoe Commented Aug 11, 2010 at 18:37
• it will work in all browsers supported by jQuery but is very annoying for the user since the brower looks as "frozen", feels like bugged. in some you can't even have an animated GIF displayed if you want to show that something's actually happening. – darma Commented Aug 11, 2010 at 18:40
• Its a legacy app that is terribly written. The wait until this one thing Ajax response is done is the best workaround we have to deal with the user changing another dropdown before this is plete. I would love to use the trending answer but there is already some many fake modal dialogs and blackout divs already. This app is a mess. – BuddyJoe Commented Aug 11, 2010 at 19:35
• I guess I should add this only freezes the interface for 1/2 to 1 second. Not ideal, I agree. – BuddyJoe Commented Aug 11, 2010 at 20:00

1 Answer 1

Block with HTML+CSS, unblock with jQuery

The best way would be to have your HTML with the overlaid DIV that blocks all clicks to the content of the page. So it acts as a mask. This mask would have to be positioned, dimensioned and styled using CSS.

When page load happens, you can use jQuery and remove this mask hence enable your page.