This week's book giveaway is in the Mac OS forum.
We're giving away four copies of a choice of "Take Control of Upgrading to Yosemite" or "Take Control of Automating Your Mac" and have Joe Kissell on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes What is a jQuery Document Ready Handler? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "What is a jQuery Document Ready Handler?" Watch "What is a jQuery Document Ready Handler?" New topic
Author

What is a jQuery Document Ready Handler?

Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61315
    
  66

Typically, when you want to perform actions when a page is loaded, you define an onload handler for the page. This is typically done by using the onload attribute of the <body> tag, or by assigning a function to window.onload.

The problem when using onload to initialize a page, is that it executes after all page elements, including external resources, have loaded. This creates a delay in which your page is persented to the user when it may not be quite ready for the user to interact with (because the onload handler hasn't fired yet).

jQuery solves this problem by introducing the document ready handler.

This handler is executed when the DOM has been created, but before the page is presented to the user. This guarantees that you can set up the page prior to the user being able to interact with it.

Without jQuery, setting this up is tricky to do in a cross-browser fashion, but jQuery makes it easy.

There's a formal syntax for defining a ready handler, but the easy short-hand method is to simple pass a function literal to the $() function. For example in a <script> block, you could write:



This is covered in section 1.3.3 of the free chapter available at http://manning.com/bibeault.

Moreover, you can conveniently define as many such blocks as you like (as opposed to a single onclick handler) and they will all execute when the DOM is ready.
[ January 15, 2008: Message edited by: Bear Bibeault ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Raghavan Muthu
Ranch Hand

Joined: Apr 20, 2006
Posts: 3344

That is so nice of you Bear for having predicted and identified some common but expected questions and addressed them!

Thank you!


Everything has got its own deadline including one's EGO!
[CodeBarn] [Java Concepts-easily] [Corey's articles] [SCJP-SUN] [Servlet Examples] [Java Beginners FAQ] [Sun-Java Tutorials] [Java Coding Guidelines]
Yehuda Katz
Author
Greenhorn

Joined: Jan 14, 2008
Posts: 21
Another neat trick for those of you using jQuery together with another library that uses the $ function:



That's equivalent to:


The second snippet, mind-bending as it might seem, simply creates a closure with a $ param and immediately calls it with the jQuery function, temporarily binding $ to jQuery.

If that went over your head, suffice it to say that the first snippet will run the function once the DOM is ready, and give you access to $ in the limited scope of that function. /me breathes out
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61315
    
  66

Advanced concepts and syntax such as that shouldn't scare off any novices -- it's all very well explained in the book. There's even an appendix for those that need some help (or reminders) understanding JavaScript concepts like function contexts and closures.

Scary as these concepts may seem at first, they're really not all that bad once someone explains then to you (and I'll say that we did a good job of it in the book, if I may) and they are absolutely essential to getting the most out of your JavaScript code whether you are using jQuery or not.
[ January 15, 2008: Message edited by: Bear Bibeault ]
 
GeeCON Prague 2014
 
subject: What is a jQuery Document Ready Handler?