Archive for September, 2006

Sep
05
2006

Multiple $(document).ready()

One more great thing about $(document).ready() that I didn't mention in my previous post is that you can use it more than once. In fact, if you don't care at all about keeping your code small, you could litter your javascript file with them. It's great to be able to group your functions within a file or even across multiple files, and jQuery's flexible $(document).ready() function allows you to do that, pain free. You could, for example, have one .js file that is loaded on every page, and another one that is loaded only on the homepage, both of which would call $(document).ready(). So, inside the <head> tag of your homepage, you would have three references to JavaScript files altogether, like so:
PLAIN TEXT
HTML:
  1. <script src="/js/jquery.js" type="text/javascript"></script>
  2. <script src="/js/common.js" type="text/javascript"></script>
  3. <script src="/js/homepage.js" type="text/javascript"></script>

You could also do something like this inside a single .js file:
PLAIN TEXT
JavaScript:
  1. $(document).ready(function() {
  2.   // some code here
  3. });
  4. $(document).ready(function() {
  5.   // other code here
  6. });

A final note: In a comment to my previous post, Jörn gave this excellent tip for shrinking your code:

Even for this little amount of code is a shortcut available: 

$(function() {
// do something on document ready
});
A function passed as an argument to the jQuery constructor is bound to the document ready event.

Coming Up: In my next entry, I'll show how to do a simple effect with jQuery. You'll be amazed at how easy it is!

Levels: Beginner | Categories: Events | 26 Comments »

Sep
03
2006

A Getting Started Guide

Jörn Zaefferer has put together a nice "Getting Started Guide" that can help people, um, get started wtih jQuery. It'll help anyone who is new to jQuery, and even those who are fairly new to JavaScript and programming in general — just the kind of help I like. Here is what the guide includes:
  1. Setup
  2. Hello jQuery
  3. Find me: Using selectors and events
  4. Rate me: Using AJAX
  5. Animate me: Using FX
  6. Sort me: Using tablesorter plugin
  7. Plug me: Writing your own plugins
  8. Next steps
We'll be covering some of these topics here, too, but the more people who get the message out about how easy it is to use jQuery, the better.

Levels: Beginner | 4 Comments »

Sep
02
2006

Welcome to Learning jQuery!

Welcome to the new Learning jQuery — a multi-author weblog with the aim of sharing information about this most amazing of JavaScript libraries. As we post entries, you might begin to notice that the three authors — Karl, Dan, and JonBob — approach jQuery, JavaScript, and life in general from three different perspectives. Our programming experience ranges from beginner to advanced, so we hope to appeal to all levels of other programmers out there as well. We'll do our best to make each entry clear, concise, and understandable, and we'll also try to place them in categories according to level of difficulty. If you have questions or critiques or suggestions for improvement, well, that's what the comments are for. Enjoy! p.s. This entry probably should have been the first one on the blog, but in the rush and excitement to get this thing rolling, we jumped right in with some code.

Filed under: Announcement | 3 Comments »

Sep
02
2006

Introducing $(document).ready()

This is the first thing to learn about jQuery: If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.

Read the rest of this entry »

Levels: Beginner | Categories: Events | 123 Comments »

Sep
01
2006

Sacrificial Lambda

Dynamically binding event handlers to content that has been ajaxed in with $.load without repeating yourself can be tricky. Lambda functions help you to not repeat yourself as much. jQuery uses lamdba functions everywhere, so if you're familiar with jQuery, you should be familiar with the syntax of lambda functions.

In this example, the ajaxed-in content contains the elements that trigger a $.load over themselves.

PLAIN TEXT
JavaScript:
  1. prepare_links = function() {  
  2.   var month = $('.calendar-info .month').html();  
  3.   var year = $('.calendar-info .year').html();    
  4.   $('.previous-month').click(function() {
  5.      $('#calendar').load(this.href, prepare_links);
  6.      return false;
  7.   });
  8.   $('.next-month').click(function() {
  9.      $('#calendar').load(this.href, prepare_links);
  10.      return false;
  11.   });
  12. };
  13. $(document).ready(function() {
  14.    prepare_links();
  15. });

Make sure you're not calling the function in the callback by accidentally using prepare_links():

PLAIN TEXT
JavaScript:
  1. $('.next-month').click(function() {
  2.    $('#calendar').load(this.href, prepare_links()); /* Don't do this */
  3.    return false;
  4. });

This would set the callback to whatever the return value of the function is, not to the function itself.

Levels: Advanced | Categories: Events | 7 Comments »