Sometimes when developing a web application, you need to query a large amount of data, manipulate it and present it in a beautiful and readable way. That kind of operations – given that you created a resource optimized sql query – might take time and the user, waiting for data to appear on the screen, might get nervous not knowing what is really happening to the submitted request. So what? There are risks involved in that waiting: the user might hit other buttons sending multiple requests to the server. Again the user might submit data update more than one time. Or, simply, the user might think that your application is lousy and really slow (while you know that the user just submitted a very complicated query and you can’t do much about it in terms of speeding up the process!).
At that point, you probably need to put some sort of notice, making the user aware of the fact that the system is not freezing and that something is really going on: something like “Please wait. Data loading.”
I have done this many times and in different ways. Here I will explain how to do it with jQuery.
First of all, remember that doing this for all your documents might be time consuming, so think about using an include.
Ok lets start building the little popup message. Put the code everywhere in your .inc file:
<div id="progressIndicator" class="progressIndicatorStyle" align="center">
Data loading. Please wait
<br />
<img src=" /images/loading.gif" width="32" height="32"/></div>
As you can see, you have to assign an id and a class to the div tag. Inside the div tag you can put whatever you want. In the given example there’s a message and an animated gif like this:
Now, you can use a style for the progressIndicator div:
<style type="text/css">
.progressIndicatorStyle
{
background-color:#333333;
width:150px;
height:50px;
top:50%;
left:42%;
z-index:99999;
position:fixed;
display:block;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: outset;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: outset;
border-top-color: #CCCCCC;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #CCCCCC;
padding: 5px;
}
</style>
The way you make the popup look like, is up to you. Colours, borders, width, height and padding are easily configurable, but – as you may have noticed – the z-index, the position and display attributes are very important. That is because you need the popoup to be on top of everything else.Now you need to make it work. Insert two functions: one to show the progressIndicator and one to hide it. First of all, include the jQuery library in the head of your document:
<script type="text/javascript" src="../js/jquery.js"></script>
And then create the two functions:
<script type="text/javascript">
jQuery.noConflict();
function closeProgressIndicator() {
jQuery("#progressIndicator").hide();
}
function openProgressIndicator() {
jQuery("#progressIndicator").show();
}
</script>
Now that you have the two functions, you need to call them when needed. As an example you might want to call the opening function every time the user click an internal link. In order to do it you might use something like:
onClick="location.href= 'yourfile.asp';openProgressIndicator()"
And what about closing it? Well, you can close it using something like:
<body onload="closeProgressIndicator()">
It is totally up to you, where and when to use the two functions, but – as you can see – it is very easy.
One of the important thing I would like to point out is that the “body onload” method might be quite tricky and might be a problem. Remember that you need to hide the progressIndicator when the page is completely loaded and when your data is actually displayed, not before. The onload trick sometimes doesn’t work as expected, so you might need to find another method to call the closeProgressIndicator function.
Isn't it easy? Enjoy!
it does not work for multiple pages
ReplyDeleteIt works in one page but in other page message is shown before clicking the button.
ReplyDeleteCan you please suggest me any other method for calling closeProgressIndicator function.
ReplyDeleteGreat idea with the inc page.
ReplyDelete