Here is the code that we wrote to do page masking. In the form tag we simply put an onsubmit=“doLoadingMask()” and the mask is rendered to the page into the div with id=“loading-mask” that wraps all of the page content. This stops the user from trying to click around and lets them know that something really happened when they clicked the button as not all users look to the browser icons spinning or status bar for details.
1 2 3 4 5 6 7
We ran into a problem that occurred very infrequent that would cause the form submit to hang for a long time… or indefinitely. With the mask remaining on the screen the entire time and having the user blocked from interacting with the page, this was a problem. So I rewrote the code to be “error/timeout” friendly in that it disappears after 30 seconds and the user can either reattempt the action of leave the page and come back. The 30 second timeout does not stop the form submission from attempting to continue so given they leave it alone long enough it still might complete after the mask disappears.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
This simply adds a 1 second interval call to invoke the maskUpdater and when the timeout is reached it just unloads the mask. It also updates the mask with a “Waiting… [time]” every 5 seconds.
Every time I come across code written in ExtJS I rewrite it in jQuery. Here is the same code as above using jQuery and jQuery UI to accomplish the same thing. We use a slightly different setup for the div as it doesn’t have to encompass the while page content. I just put this after the body tag
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
The setup for the dialog is a little more lengthy than the ExtJS version, but we have more control around the look and feel of the message box. The open event override is setting the timer and also hiding the title and close bars.
The old mask (content blacked/grayed out for security reasons)