Part 3 Using jQuery.AJAX() to load data and catch loading errors
Well, after a bit of a delay, here's the third part of my tutorial (part 1, part 2) demonstrating different ways of achieving the same result. In this part, I am going to use some more jQuery and CSS to build on what we coded in the last installment, and we are going to use the jQuery.ajax() function to add a bit more sophistication to our word generator.
Step 1 Create your HTML document.
First, we need an HTML document to contain and update our externally loaded content. Our page will contain a display area for the loaded text, and a button which will update the page on demand. It should look something like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Step 2. Add the jQuery library to your page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Random words</title>
</head>
<body>
<div id="displayRandomWords"></div>
<div id="displayUpdateButton"></div>
</body>
</html>
As we will be calling upon the magic of jQuery again, we need to include the library in the head of our HTML so, add the following to the head of your page...
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>Step 3 Write the code to do the clever stuff...
Now for the interesting bit. We need to create a function to call the random_words.asp, and if it loads successfully, display the output. We also need a nice preloading graphic to let users know that something is happening, and finally a link to reload new random words, so in your favourite editor, create a .js file as follows, and save it as jq_name_gen_part2.js
// Once the browser is loaded and ready to go...Step 4: Make sure your .js file is included in the head of your HTML document, below your call for jQuery itself.Your HTML should now look like the following piece of code. Notice I have also included a CSS file to make it look a bit nicer too. You can download all the source code for this part of the tutorial from here.
$(document).ready(function(){
//define the getData function, to handle the data process....
function getData(){
// show the preload graphic....
$('#displayRandomWords').html('<img src="ajax-loader.gif" />');
// get rid of content from link button - It's not needed while data is loading...
$('#displayUpdateButton').empty;
// now setup the jQuery.AJAX function
$.ajax({
// type can be GET or POST....
type: "GET",
// file name of data to be loaded...
url: "random_words.asp",
// dataType - Use this to prevent unexpected results with loaded data
dataType: "HTML",
// Define function that fires when data is successfully loaded...
success: function(data){
// Build the Reload link...
$('#displayUpdateButton').html('<a href="#" id="aReloadData">Reload...</a>');
// Display the output from our server-side script...
$('#displayRandomWords').html('<strong>'+ data +'</strong>');
// setup the click event handler for the reload button...
$('#aReloadData').click(function(event){
// fire the getData function on click to reload new words...
getData();
})
},
// a simple bit of error trapping. If there is problem loading the data, show an error message...
error: function(){
$('#displayRandomWords').html('Oops, we seem to have hit an error!');
}
});
};
//Fire the getData function first time out to populate the elements onLoad....
getData();
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">If you want to see it all running in your browser, click here...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="name_generator_demo.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="jq_name_gen_part2.js" type="text/javascript"></script>
<title>Random words</title>
</head>
<body>
<div id="displayRandomWords"></div>
<div id="displayUpdateButton"></div>
</body>
</html>
In the next part, I will show how to use Flash and Actionscript 2 to load and display external data, so check back soon.
