The other day I needed to develop a web page that would display a “loading” message while a large and complex query ran. The solution I came up with involves using Ajax via the JQuery JavaScript library, and goes something like this:
1. Build the base page
The base page will be the one that the user visits. It is responsible for showing the loading message, and providing an area for the data to be displayed. The most basic HTML goes something like this:
<html> <head> <title>Base page for content</title> </head> <body> <div id="contentLoading" class="contentLoading"> <img src="loading.gif" alt="Loading data, please wait..."> </div> <div id="contentArea"> </div> </body> </html>
The key sections here are the <div> tags on lines 06 and 09 above. The <div> on line 06 is the one that displays the loading message. In this case it is an image I downloaded from the Ajaxload website. The <div> on line 09 is the one that will be where the content that we get will be displayed.
2. Build the page that provides the content
The second page is the one that will be provide the content to be displayed in the <div id=”contentArea”> tag in the base HTML page. For my web development I use PHP, but it could be any server based language that is used. A simple PHP page to confirm that the Ajax is working is as follows:
// get the start time $start_time = microtime(true); // sleep for four seconds sleep(4); // get the end time $end_time = microtime(true); // print out a message print "<p>Call to secondary PHP page worked!</p>" print "<p>Elapsed time: " $end_time - $start_time . "</p>"
The key line here is line 05. The call to the sleep() function will mean that the execution of the page is suspended for four seconds. In this way you can see if the Ajax is working because you will see the loading message for no more than four seconds. If it is longer, or shorter, you know something bad happened.
3. Tying it all together with JQuery and Ajax
To tie the two pages together using JQuery and Ajax the first thing we need to do is modify the base page slightly so the JQuery library is loaded. This is simply achieved by line 04 in the source code below:
<html> <head> <title>Base page for content</title> <script src="/jquery.js" type="text/javascript"></script> </head> <body> <div id="contentLoading" class="contentLoading"> <img src="loading.gif" alt="Loading data, please wait..."> </div> <div id="contentArea"> </div> </body> </html>
We then need to add the following JavaScript code as well:
<script type="text/javascript">
<!--
jQuery(function($) {
$("#contentArea").load("test.php");
});
$().ajaxSend(function(r,s){
$("#contentLoading").show();
});
$().ajaxStop(function(r,s){
$("#contentLoading").fadeOut("fast");
});
//-->
</script>
The code above adds three functions. Their jobs are as follows:
- When the page is ready to be manipulated, ie. fully loaded, use Ajax to load the output of the test.php page into the <div id=”contentArea> tag;
- When an Ajax call starts, show the <div id=”contentLoading> tag; and
- When an Ajax call completes, fade out the <div id=”contentLoading> tag effectively hiding the message.
In this way the following workflow is achieved:
- The users browser loads the base HTML page;
- Once the base HTML page is loaded an Ajax call is made to load the test.php page;
- When the Ajax call starts the content in the <div id=”contentLoading> tag, the loading message, is displayed;
- When the Ajax call finishes the output of the test.php page is put into the <div id=”contentArea> tag and displayed to the user. At the same time the content in the <div id=”contentLoading> tag is hidden.
This achieved what I needed. The page shows the user that something is happening, the data is being loaded, and therefore hopefully the user is patient enough to wait until it completes and doesn’t click the refresh button or become impatient. There are a couple of caveats with this solution and they are:
- If the user doesn’t have JavaScript enabled they won’t see the content returned by the Ajax call because it will never happen. In a closed environment, like the one I’m developing for, this isn’t much of an issue but for a website designed for general consumption an alternative would need to be provided;
- The use of Ajax can make it harder to diagnose display issues with your HTML because you can’t see the HTML returned by the Ajax call by using the “view source” functionality of your browser. In my case I use Firefox and to see the HTML I needed to use the “View Generated Source” functionality of the excellent Web Developer add-on; and
- The example code uses the global AjaxSend and AjaxStop functions. This means it is not practical to have another different Ajax call on the same page.
I’m sure there are other ways of doing this type of thing, by no means is this the only way. I’m still exploring the capabilities of the JQuery library and will no doubt find different ways of achieving this type of functionality. If I do, I’ll be sure to post about them here.
October 7, 2007 at 11:33 am
[...] sorting using JQuery October 7th, 2007 — techxplorer Yesterday I posted about how I was using JQuery and Ajax to produce a loading message for a website I’ve been working [...]
October 13, 2007 at 6:22 pm
[...] JQuery for an Ajax loading message (2) October 13th, 2007 — techxplorer Last week I posted about how I used the JQuery JavaScript library to implement a loading message using Ajax. Since that post [...]
January 18, 2008 at 10:04 pm
Something to be aware of when using loader gifs. If you are redirecting to a new page, rather than remaining on the same page when the javascript runs and the gif appears IE does not play the animation, just the first frame.
As I required a loader gif in between switching pages (due to wanting to reduce multiple server requests when there was a short delay in a page redirect) I required a work around.
My work around for this was to use “append” to add the animated gif (image tags and all) to the html after the fadeIn was called, this meant that I could use animated gifs which fadeIn and they would actually animate in IE.
January 19, 2008 at 10:39 am
@Andrew,
Many thanks for the tip, I wasn’t redirecting in my site so I hadn’t seen that particular issue.
I’ll keep it in mind for the future though.
Thanks for sharing.
February 12, 2008 at 2:04 am
Beautiful, a great, simple guide, thank you
March 13, 2008 at 4:47 am
It’s so hard to put a download link for those pages ?…Anyway, great sharing, thx a lot
March 13, 2008 at 9:55 am
@axy,
I thought as they were really only snippets of HTML that putting them inline in the post would be ok. But I’ll keep the idea of download links in mind for future posts.
May 4, 2008 at 6:40 am
How can I manage that test.php will grab some variables that I post using a form that I post to the page where the div’s are placed on ?
Normally I would post to test.php direclty, but now I want to use this way but still need to be able that test.php will pickup my form info that I submit from another page.
Is this doable ?
May 5, 2008 at 8:41 am
@Rutger,
Yes, that is certainly doable.
What I have done in the past is use the JQuery Form Plugin to do this sort of thing.
It does all of the heavy work for you.
Hope this proves useful.
June 9, 2008 at 6:34 pm
Hey i need the same to display while the query is been processed…any samples for that..
June 10, 2008 at 9:04 am
@Kailash,
Unfortunately I don’t have any other samples. I suggest you try the JQuery Documentation website.
June 29, 2008 at 11:39 pm
Brilliant little example and very well explained - thanks for taking the time to publish it. Also great link to the download GIF generator: will use that A LOT - thanks again
Ed