How to Download the jQuery UI Library for HTML5 and CSS3 Programming
How to Build a Basic jQuery Mobile Page for HTML5 and CSS3 Programming
How to Build a Tabbed Interface in AJAX for HTML5 and CSS3 Programming

How to Use AJAX to Create an Initialization Function for HTML5 and CSS3 Programming

Many HTML5 and CSS3 pages require an initialization function. The body onload mechanism is frequently used in DOM/JavaScript to make pages load as soon as the document has begun loading. This is a function that's run early to set up the rest of the page. While body onload does this job well, a couple of problems exist with the traditional technique:

  • It requires making a change to the HTML. The JavaScript code should be completely separated from HTML. You shouldn't have to change your HTML to make it work with JavaScript.

  • The timing still isn't quite right. The code specified in body onload doesn't execute until after the entire page is displayed. It would be better if the code was registered after the DOM is loaded but before the page displays.

How to use $(document).ready()

jQuery has a great alternative to body onload that overcomes these shortcomings. Take a look at the code for to see how it works:

<!DOCTYPE html>
<html lang = "en-US">
<head>
 <title>ready.html</title>
 <script type = "text/javascript"
   src = "jquery-1.10.2.min.js"></script>
 <script type = "text/javascript">
 $(document).ready(changeMe);
 function changeMe(){
  $("#output").html("I changed");
 }
 </script>
</head>
<body>
 <h1>Using the document.ready mechanism</h1>
 <div id = "output">
  Did this change?
 </div>
</body>
</html>

This code uses the jQuery technique for running initialization code:

  • The body tag no longer has an onload attribute. This is a common feature of jQuery programming. The HTML no longer has direct links to the JavaScript because jQuery lets the JavaScript code attach itself to the web page.

  • The initialization function is created with the $(document).ready() function. This technique tells the browser to execute a function when the DOM has finished loading (so that it has access to all elements of the form) but before the page is displayed (so that any effects of the form appear instantaneous to the user).

  • $document makes a jQuery object from the whole document. The entire document can be turned into a jQuery object by specifying document inside the $() function. Note that you don't use quotation marks in this case.

  • The function specified is automatically run. In this particular case, you want to run the changeMe() function, so you place it in the parameter of the ready() method. Note that this refers to changeMe as a variable, so it has no quotation marks or parentheses.

You see several other places (particularly in event handling) where jQuery expects a function as a parameter. Such a function is frequently referred to as a callback function because it's called after some sort of event has occurred. You also see callback functions that respond to keyboard events, mouse motion, and the completion of an AJAX request.

Alternatives to document.ready

You sometimes see a couple of shortcuts because it's so common to run initialization code. You can shorten

 $(document).ready(changeMe);

to the following code:

 $(changeMe);

If this code is not defined inside a function and changeMe is a function defined on the page, jQuery automatically runs the function directly just like the document.ready approach.

You can also create an anonymous function directly:

 $(document).ready(function(){
  $("#output").html("I changed");
 });

This (anonymous function) method is cumbersome, but you frequently see jQuery code using this technique. You can create a function called init() and call it with a line like this:

$(init);

This technique is simple and easy to understand but you may encounter the other variations as you examine code on the web.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Add Themes to Your AJAX Elements for HTML5 and CSS3 Programming
How to Add Events to jQuery Objects for HTML5 and CSS3 Programming
How to Make an AJAX Request with jQuery for HTML5 and CSS3 Programming
How to Use the Accordion Widget in AJAX for HTML5 and CSS3 Programming
How to Use the AJAX jQuery Object for HTML5 and CSS3 Programming
Advertisement

Inside Dummies.com