Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Doug Hughes and Ezra Parker and Dan Wilson and John Mason and Jason Dean and Luis Majano and Mark Mandel and Brian Kotek and Wil Genovese and Rob Brooks-Bilson and Andy Matthews and Simeon Bateman and Ray Camden and Chris Rockett and Joe Bernard and Dan Skaggs and Byron Raines and Barney Boisvert and Simon Free and Steve 'Cutter' Blades and Seth Bienek and Katie Bienek

jQuery's Passes Itself As An Argument To The "Ready" Event Callback

By Ben Nadel on

As I read through Cody Lindley's excellent jQuery Enlightenment book, I found myself dog-earing many pages that contained little tips and factoids that I had never seen before. One of these facts was that jQuery passes itself as an argument to the callback methods that you provide in the "ready" event bindings. While this might not seem at first like a useful piece of information, when you are working in an application that has "$" variable conflicts, having jQuery passed itself to your callbacks can make your life a whole lot easier.

To demonstrate this awesomeness, take a look at this code in which the "$" is already being used and must be released via the noConflict() method:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>jQuery Ready Event Argument</title>
  • <script type="text/javascript">
  •  
  • // Create a $ variable for conflict.
  • window.$ = "Conflicted$";
  •  
  • </script>
  • <script type="text/javascript" src="jquery-1.3.2.js"></script>
  • <script type="text/javascript">
  •  
  • // Call no-conflict to release jQuery "$" shorthand.
  • jQuery.noConflict();
  •  
  •  
  • // When the document is ready, output the current $ value
  • // to demonstrate that it is no longer jQuery.
  •  
  • jQuery(
  • function(){
  • // This is a check to see if the "$" variable
  • // exists if we are not using it as an argument.
  • document.write(
  • "Current ($): " + $ + "<br />"
  • );
  • }
  • );
  •  
  •  
  • // When you pass your anonymous, callback method to the
  • // document::ready event binding, jQUery passes the
  • // jQuery instance to the callback as an argument.
  •  
  • jQuery( document ).ready(
  • function( $ ){
  •  
  • // Output the jQuery version.
  • document.write( $.fn.jquery + "<br />" );
  •  
  • }
  • );
  •  
  •  
  • // This also works for the short-hand notation in which
  • // a callback method is passed directly to the jQuery
  • // object.
  •  
  • jQuery(
  • function( $ ){
  •  
  • // Output the jQuery version.
  • document.write( $.fn.jquery + "<br />" );
  •  
  • }
  • );
  •  
  • </script>
  • </head>
  • <body>
  • <!--- Body content here. --->
  • </body>
  • </html>

As you can see in the above code, the "$" variable is already being used; as such, jQuery must release its hold on it as the library's short-hand reference. However, because jQuery passes itself to the document::ready event callbacks, as long as we define the callback method parameter as "$", we can use the short-hand reference with impunity. And, in fact, when we run the above code, we get the following output:

Current ($): Conflicted$
1.3.2
1.3.2

Because the callback method parameters are closer in the variable lookup chain to the method body than the window scope, the method body will check the parameters (argument collection) and find the "$" reference before it ever gets to the window scope. This allows our entire callback method to operate under the assumption (fact) that the "$" variable now references the jQuery library.



Reader Comments

@Ben

That is awesome! I run into that problem all of the time as a lot of our older applications run the Prototype library which uses $. I always end up replacing $ to "jQuery" using the noConflict method ... not now though :)

Good tip!

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.