Overlay/Restrict the User during Postback

WaqasYousuf

Rate me:

4.50/5 (2 votes)

12 May 2011CPOL3 min read

40.5K

1.1K

Simple overlay to restrict users during postback.

Download source - 151.7 KB

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.

ASP.NET

<%@ 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:

CSS

#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:

JavaScript

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:

JavaScript

$("<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.

JavaScript

$('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:

JavaScript

$('.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

12^th May, 2011: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

WaqasYousuf

Software Developer Telenor Pakistan

Pakistan

Waqas Yousuf is a Software Engineer and Microsoft Certified Professional. He is currently working as a Development Executive at Telenor Pakistan. He loves to learn new technologies and shares his idea, thoughts and professional knowledge to others. He has solid background and working experience on Web Development and Web Designing, he has been working on them since more than 2 years. His major areas are ASP.NET, Jquery , CSS and HTML.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Overlay/Restrict the User during Postback

Introduction

History

License

Comments and Discussions