Disabling a Web Page for a Long Running Operation
I was trolling the ASP.NET forums tonight and found a very good question from ctrlctrl, . He wanted to know how to ‘grey’ out the page while he was waiting on a long running process on the server. The answer is pretty simple, it involves a little AJAX and CSS trickery. I am going to demonstrate this by calling a web service to simulate some server-side process and since I explained this a few posts back, Making a Thin Contact Form, I will not explain it here.
The trick lies in displaying and hiding a DIV element that covers the entire page. The DIV itself only contains a single image to visually indicate work is happening. Of course you can add anything you want to the DIV.
<div id="PopUpBackGround">
<img src="loading.gif" alt="Performing Long Running Task...." />
</div>
The next step is to define a CSS rule for the DIV. The first CSS property to note is setting the z-index to some high number, 1400 in this example. This places the DIV above the working surface of the page. This is important because you do not want users interacting with the page while the background process is running. The next, the filter property is set the opacity of 70%. The first line sets the opacity for Internet Explorer, the second for FireFox and other browsers. The height and width are set to 100%, which makes the DIV cover the entire viewable page, which is important because you do not want users interacting with the page. Finally the background color is set to a grey, #333 so as to emulate a disabled page.
#PopUpBackGround
{
z-index: 1400;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: alpha(opacity=70);
opacity: 0.7;
display: none;
background: #333;
padding-top: 15%;
padding-left: 15%;
}
Now JavaScript must be used to display and hide the PopUpBackGround DIV. When the page is loaded the DIV must be hidden, so the script file enforces this by hiding it when it is loaded. The actual display and executing the process must be invoked by something, which in this case is hyperlink set to load an AJAX function. The function calls the process to be executed on the server, and displays the PopUpBackGround DIV.
HideElement('PopUpBackGround'); //Hides the DIV.
function RunDataProcess() {
ShowElement('PopUpBackGround'); //Displays the DIV.
GrayOutService.DataIntensiveProcess(OnDataProcessConplete, OnDataProcessException);
}
Now the background process runs, eventually returning a result. For this example it returns the time the process ended. The OnDataProcessComplete function is invoked when the web service finishes. This will hide the the PopUpBackGround DIV again and the time is displayed.
function OnDataProcessConplete(result) {
HideElement('PopUpBackGround');
var dResult = $get('dResult');
if (null != dResult) {
dResult.innerHTML = 'The Process Completed at - ' + result;
}
}
The actual result looks like the following:
Download Code