Click here to Skip to main content
13,801,559 members
Click here to Skip to main content
Add your own
alternative version

Stats

9.3K views
343 downloads
10 bookmarked
Posted 22 Jul 2017
Licenced CPOL

Showing loading image in the client side whenever a server postback / Background server operation is in progress

, 7 Aug 2017
Rate this:
Please Sign up or sign in to vote.
Showing loading image in the client side whenever a server postback / Background server operation is in progress

Introduction

Showing loading image in the client side whenever a server postback / Background server operation is in progress

Background

I have seen in lots of websites where we have this common need as per our topic in all the sites. That is whenever a user click something in the website it should intimate the user that your request is being processed / some loading image. But there are a number of sites where this problem has not been taken care of and users will have an impression of he has not clicked and will click again and again. Also there will be other buttons also on click of which while other server request is in progress it will result in unexpected error. This article will give you a perfect solution for all these.

Using the code

Suppose we have have page called MyPage.aspx on which we need to implement this waiting message fuctionality.

First of all we need add jQuery reference to the aspx page becasue we are going to use some jQuery function to achieve this.

<head>
<script language="javascript" type="text/javascript" src="../Common/jquery.min.js"></script>
</head>

Here I have made a reference to my jQuery minified file which I have inside my common folder.

Either you can give the cloud reference also as below.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Then we need to create a cover page class "LockOn" using which we can make a "coverScreen div" entirely above the actual page "MyPage.aspx" (z-index: 999; plays major role) as an overlay.

Then it will be like a transparent cover screen / overlay whcich restrict all the action in the page "MyPage.aspx", but since transparent we can still see the actual page.

We also use loading gif which will in effect loading feel.

Our "LockOn" class will be like as before

`.LockOn {
  display: block;
  visibility: visible;
  position: absolute;
  z-index: 999;
  top: 0px;
  left: 0px;
  width: 105%;
  height: 105%;
  background-color:white;
  vertical-align:bottom;
  padding-top: 20%;
  filter: alpha(opacity=75);
  opacity: 0.75;
  font-size:large;
  color:blue;
  font-style:italic;
  font-weight:400;
  background-image: url("../Common/loadingGIF.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  }

Now we need to create our div with this class which cover entire page as an over lay whenever the page is getting loaded

<div id="coverScreen"  class="LockOn">
</div>.

Now we have a poper covering overlay div "CoverScreen". Next step is to control the this covering div when and were required.

For example, the first time when we render the page show this "CoverScreen" div as it is. Once the page completes the loading we need to his this DiV so that user can seen the normal page with all its functionality. we can achieve below jQuery code.

$(window).on('load', function () {
    $("#coverScreen").hide();
    });

The above solution will be fine whenever the page is loading.

Now suppose I have a print button with Id "#ucNoteGrid_grdViewNotes_ctl01_btnPrint" on click of which an SSRS report is getting loaded and it is taking long time till then we need to intimate user that page is loading. For that we need to show this "Covering Div" in the client click event as shown below

$("#ucNoteGrid_grdViewNotes_ctl01_btnPrint").click(function () {
$("#coverScreen").show();
});

In the above code "ucNoteGrid_grdViewNotes_ctl01_btnPrint" my print button run a asp.net control ID.

That means when we click this print button (which will take long time to give the report) it will show our cover screen with GIF which give [![this][1]][1] result and once page is ready above already windows on load function will fire and which hide the cover screen once the screen is fully loaded.

Our page loading stayle will be as shown below.

License

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

Share

About the Author

Rinoy Ashokan
Software Developer (Senior) Finastra
India India
No Biography provided

You may also be interested in...

Pro

Comments and Discussions

 
PraiseThanks Pin
Fadyhuwaidy15-Aug-17 6:52
professionalFadyhuwaidy15-Aug-17 6:52 
QuestionNice feature Pin
srHunter27-Jul-17 11:40
membersrHunter27-Jul-17 11:40 
AnswerRe: Nice feature Pin
Rinoy Ashokan7-Aug-17 22:14
memberRinoy Ashokan7-Aug-17 22:14 
SuggestionVote of 3: why add dependency on JQuery? Pin
emartinho24-Jul-17 7:32
memberemartinho24-Jul-17 7:32 
GeneralRe: Vote of 3: why add dependency on JQuery? Pin
Rinoy Ashokan7-Aug-17 21:48
memberRinoy Ashokan7-Aug-17 21:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web03 | 2.8.181215.1 | Last Updated 8 Aug 2017
Article Copyright 2017 by Rinoy Ashokan
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid