Using JQuery for an Ajax loading message (2)

October 13, 2007 — techxplorer

Last week I posted about how I used the JQuery JavaScript library to implement a loading message using Ajax. Since that post I’ve needed to re-work the page, and in doing so have learnt more about JQuery and the way it helps in the development of Ajax related tasks.

I needed to re-work the page so that it could load different tables depending on which link a user clicked on. The way I implemented the changes was as follows.

1. Build the base page

The basic page layout is something like this:


<html>
<head>
<title>Base page for content</title>
</head>
<body>
<div id="contentLinks" class="contentLinks">
<a href="#" onclick="loadContentA()">Load table A</a>
| <a href="#" onclick="loadContentB()">Load table B</a>
</div>
<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, 10 and 13 above.

The <div> that starts on line 06 contains the links that the user clicks on to load a specific table. Each one calls a separate function. I could have been trickier and used one function with parameters but for the time being I’m using separate functions;
The <div> that starts on line 10 displays the loading message. In this case it is an image I downloaded from the Ajaxload website; and
The <div> that starts on line 13 will hold the content, in this case tables containing data drawn from an Oracle database.

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>Parameter: " . $_GET['type'] . "</p>
print "<p>Elapsed time: " $end_time - $start_time . "</p>"

The key lines here are 05 and 12. The call to the sleep() function, on line 05, 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. The parameter that is passed to the page is output on line 12, in this way you can tell if the right Ajax request was made.

3. Tying it all together with JQuery and Ajax

To tie the two pages together using JQuery and Ajax it was necessary to 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="contentLinks" class="contentLinks">
<a href="#" onclick="loadContentA()">Load table A</a>
| <a href="#" onclick="loadContentB()">Load table B</a>
</div>
<div id="contentLoading" class="contentLoading">
<img src="loading.gif" alt="Loading data, please wait...">
</div>
<div id="contentArea">
</div>
</body>
</html>

I then defined JavaScript functions for each of the links. The function loadContentA() for the first link, loadContentB() for the second link etc. They’re all very similar and look like this:


function loadContentA() {
// Show the loading div
$("#contentLoading").show();
// Hide the links
// Stops the user clicking more than once and putting
// excessive load on the server
$("#contentLinks").hide();
// Delete any pre-existingtable
$("#contentArea").empty();

// Load the data
$.get("test.php", {type: "A"}, function(data) {
// When the Ajax call finishes:
// fade out the loading div
$("#contentLoading").fadeOut("fast");
// bring back the links for the user to click on
$("#contentLinks").show();
// append the table of data to the contentArea div
$("#contentArea").append(data);
// tie the table sorter functionality to the table
$("#summaryData").tablesorter();
});
}

The loadContentA() function uses the jQuery.get() function, on line 12, to get the table that needs to be displayed. The function takes three parameters:

The URL of the page that is going to provide the data;
Any parameters to pass to the page that is providing the data; and
A callback function to use when the Ajax call finishes.

Because the Ajax call is returning a table I’m using the JQuery plugin called Tablesorter, released by Christian Bach to provide client side sorting on the table. I wrote more about using this plugin in an earlier post.

This methodology is a result of my continued explorations with the JQuery JavaScript library and I hope it proves useful to someone. If it does prove useful, please post a comment. The methodology does have some flaws however, and these 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; and
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.