Introduction
During the last couple of months, I have been doing a project which is soon going to end and I have had some new experiences. Here I would like to share one of my experiences which might be quite simple but really worth sharing.
Most of the time, we need to restrict the user during the postback, otherwise the user can still click another link or button on the page. It might not be so important in a traditional website but if we have a web application where every click is responsible for performing a complex calculation or process, for completing the complex process the page needs some time. And the developer needs to stop the user from performing any other clickable operation. I think we have various options to handle this, and here are some links that show how:
I faced the issue to restrict the user and made a little trick which is suitable to my project. I made a simple DIV which shows during the postback with animated gif image. In my case, I did not use any kind of ASP.NET validation controls and update panel for Ajax, I did all the validation and Ajax using JQuery, because I did not want add any external file of the ASP.NET generated JavaScript on application.
Here I make a small sample for overlay during postback.
I have created an ASP.NET Empty Web Application and added a SamplePage.aspx. The page contains markup and references link of the external CSS, Jquery Library and JavaScript file.
<%@ Page Language="”C#”" AutoEventWireup=”true”
CodeBehind=”SamplePage.aspx.cs” Inherits=”Overlay.SamplePage1? %>
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head id=”Head1? runat="”server”">
<title>overlay</title>
<link href=”Styles/style.css” rel=”Stylesheet” type=”text/css” />
<script type=”text/javascript” src=”Scripts/jquery-1.4.1.min.js”></script>
<script type=”text/javascript” src=”Scripts/script.js”></script>
</head>
<body onunload=”">
<form id=”form1? runat="”server”">
<div>
<asp:LinkButton ID=”LinkButton1? runat="”server”"
onclick=”LinkButton1_Click” >Click Link</asp:LinkButton><br />
<asp:Button ID=”Button1? runat="”server”" Text=”Click Submit” onclick=”Button1_Click” />
</div>
</form>
</body>
</html>
The style.css which is in Style folder contains the following CSS code for the overlay div:
#overlay {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor:wait;
background: #041128;
z-index:50;
opacity: 0.5;
-ms-filter: "alpha (opacity=50)";
filter: alpha (opacity=50);
}
#overlay img {
position:relative;
left:50%;
top:50%;
z-index:100;
}
Here are the filter properties for Internet Explorer browser (IE7 &IE8) because Internet Explorer (IE7 &IE8) does not support the Opacity property of CSS so that we need to put IE filter properties to make it possible.
Now it’s time to add some JavaScript.
The script.js which is in the folder Script contains the following code:
jQuery(function ($) {
$("<div id='overlay'><img src='Styles/images/ajax-loader.gif'
alt='loading image' /></div>").appendTo('body');
$('body a').each(function () {
$(this).addClass('is-overlay');
});
$('body input[type=submit]').each(function () {
$(this).addClass('is-overlay');
});
$('.is-overlay').bind('click', function () {
setTimeout(ShowOverlay, 1);
});
});
function ShowOverlay() {
$('#overlay').show();
}
Here is some description of the above script:
$(“<div id=’overlay’><img src=’Styles/images/ajax-loader.gif’
alt=’loading image’ /></div>”).appendTo(‘body’)
We have created an overlay div object and use the jQuery appendTo method for adding the div on the page.
$('body a').each(function () {
$(this).addClass('is-overlay');
});
$('body input[type=submit]').each(function () {
$(this).addClass('is-overlay');
);
These methods are for adding the is-overlay class on each ‘a’ tag and ‘input type submit’ button of page:
$('.is-overlay').bind('click', function () {
setTimeout(ShowOverlay, 1);
});
Now we have to attach the click event on the is-overlay class. You might be wondering why I added the setTimeout JavaScript function here. I do not directly show the overlay div here, so the answer is that if we directly call the jQuery Show method, then IE (IE7 & IE8) shows the static image of the loading, so it’s a way to animate the image on IE during the post-back.
Now here is one more issue, most of the modern browser Firefox and Safari cache the page, once we click the page and the new page has been loaded. Then if you click on the back button, the overlay div will be there especially in Firefox and Safari, so here is a way to resolve it, simply add the onUnload=”” attribute on the page body and that’s it.
I am not telling that is the best way but here is one of the suitable solutions in my case and it’s just not for ASP.NET, I think it can be used in other languages as well.
I hope that you enjoyed the post. Please share your valuable feedback and comments so that I can write some more effective things.
History
- 12th May, 2011: Initial post
