Win a copy of Design for the Mind this week in the Design forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

What is a jQuery Document Ready Handler?

 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64691
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
Raghavan Muthu
Ranch Hand
Posts: 3381
Mac MySQL Database Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That is so nice of you Bear for having predicted and identified some common but expected questions and addressed them!

Thank you!
 
Yehuda Katz
Author
Greenhorn
Posts: 21
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64691
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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 ]
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic