Home > Events > Overlay/Restrict the user during Postback

Overlay/Restrict the user during Postback

Last couples of months I have been doing a project which is going to end and I have learned some of new experiences. Here I would like to share one of my experience which might be quite simple but really worth able to makeover of the web application.

Most of the time we need to restrict the user during the post back otherwise user can click any other link or button on the page. It might not be so important in traditional website but if we have a web application where every click is responsible to perform the complex calculation or process, off course for completing the complex process the page gets the time for a while. Here developer needs to stop the user to perform any other clickable operation. I think we have various other options to handle that, here is some links to show that how can we handle it

http://www.4guysfromrolla.com/articles/061108-1.aspx

http://aspdotnet-suresh.blogspot.com/2010/11/how-to-disable-button-after-click-or.html

http://aspsnippets.com/Articles/Disable-Button-before-Page-PostBack-in-ASP.Net.aspx

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 post back 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 is I make a little sample for overlay during post-back.

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”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<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 is the filter properties for IE browser(IE7 &IE8) because IE(IE7 &IE8) does not support the Opacity property of CSS so that’s
we need to put IE filter properties to make it possible.

Now it’s time to add some JavaScript.

The script.js which is under the folder of 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 the 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 using 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 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 attach the click event on is-overlay class, you might be thinking that why I added here setTimeout JavaScript function and why
I do not directly show the overlay div here, so the answer is that if we direct call jquery show method than at 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 issues, most of the modern browser FireFox and Safar cache the page, once we click the page and the new page has been loaded than if you click on the back button the overlay div will be there especially in FireFox and Safari, so here is way to resolved it, simple 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 solution 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 me your valuable feedback and commits so that I can write some more effective things.

Advertisements
Categories: Events
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: