Watch

Watch Simple Event Delegation (Alternative flash version)

QuickTime version is approximately 22Mb, flash version is streaming.

View the demo used in the screencast

The Problem

We’ve set up our page, we’ve run all our jQuery and we’ve hooked our click handlers. But what happens new new content arrives in the page, say via an Ajax request for instance? Those click handlers don’t work anymore.

We could repeat our code to handle the click each time the Ajax has run, but that feels repetitive doesn’t it? We want our code to by abide by the DRY rule where possible: Don’t Repeat Yourself.

Can’t the container element that holds all the images listen out for clicks instead? Absolutely yes. That’s where event delegation comes in to play.

Our regular code looks something like this:

<!-- all our initial markup, images, etc -->
<script>
// when an image in the pictures list is clicked:
$pictures.find('img').click(function () {
  // fade the loading notication in to view
  $('#loadingStatus').fadeIn();
  // then read the source url from the image that
  // was clicked and remove the '_s' from the url
  // which points to the original, larger image.
  var src = this.src.replace(/_s/, '');

  // now create a new image, and set the source
  // and once it's loaded:
  $('<img>').attr('src', src).load(function () {
    // empty the main picture contain and insert 
    // *this* image
    $main.empty().append(this);

    // then stop the loading status fade and fade out
    $('#loadingStatus').stop(true, true).fadeOut();
  });
});
</script>

When the Ajax request completes we had to repeat this code to get the images to be clickable – but using the .delegate jQuery function we only have to write this once, and all new images added to the $pictures list will load as we want.

jQuery Delegate

The way jQuery’s delegate method tells a parent element to watch for a particular event, like clicking, and if that event matches a selector you give it.

So instead of doing:

$('img').click(fn); 
// in the code above this reads as 
// $pictures.find('img').click(fn);

We use:

$pictures.delegate('img', 'click', fn);

Telling the $pictures element ($pictures = $('#pictures')) to watch for click events that match the img selector (of course this could be any CSS selector), and if that condition occurs, run the fn function.

Now we can move to the next set of pictures in the example, and clicking the thumbnails still works even though the original images we hooked our click handlers have been since removed.

Demo

If you find this demo doesn’t work as expected, it’s possibly due to the demo running from within an iframe. Try running the demo in it’s own window.

Watch

Watch Populate Select Boxes screencast (Alternative flash version)

QuickTime version is approximately 60Mb, flash version is streaming.

View the demo used in the screencast

Preparation

There’s a fairly common case to have one select box driving the content of another. Or in fact, something driving the contents of a select box. Perhaps you’ve got categories like “easy”, “medium” and “hard”, like the categories used on this site. When someone selects “easy”, a select box populates with all the jQuery for Designers articles that are marked as easy.

Sometimes that second select box has it’s contents hidden in the page already, and sometimes you’ll want it to be called dynamically.

Think of it like this: if JavaScript is disabled, how do you want the visitor to use your page?

Let’s say for arguments sake, if JavaScript is disabled, the user sees a select box with the categories with a next button:

When the visitor hits next, it reloads to show them the article list to read:

Remember this is a contrived example for this tutorial. In practise, for SEO, I wouldn’t use a form to expose a list of my articles, equally there’s no way of going back to the state with the “next” button, etc. So please, if you’re starting out, don’t use this as a way to native your site.

What I really want to show you is how to progressively enhance this page using jQuery to dynamically populate these lists. However, what the screencast will also show you is how easy it is to include this kind of functionality for a prototype demo.

Tasks

Since we’re progressively enhancing the page, I want to remove the form’s default functionality, and replace it with my own. So the tasks are:

1. When the category is changed make an Ajax request
2. Take that Ajax response and insert it in to the articles select box
3. If the articles select box doesn’t exist, we need to create it for the first time
4. Update the form buttons, so that “next” doesn’t submit, and a “read” button appears when the article select is populated

Ajax Responders

Keeping it simple (and very much contrived), I’ve created three files that contain the articles that we want to display in the select box. Each called “select-boxes-easy.html“, “select-boxes-medium.html” and “select-boxes-hard.html” – as you can see the category name is in the filename. Here’s what easy looks like:

<option value="http://jqueryfordesigners.com/jquery-infinite-carousel/">jQuery Infinite Carousel</option>
<option value="http://jqueryfordesigners.com/bbc-radio-1-zoom-tabs/">BBC Radio 1 Zoom Tabs</option>
<option value="http://jqueryfordesigners.com/coda-slider-effect/">Coda Slider Effect</option>
<option value="http://jqueryfordesigners.com/image-cross-fade-transition/">Image Cross Fade Transition</option>

Essentially it’s the contents of the select element. Simple, eh?

Starting HTML

Our form starts with an initial select box and a “next” button:

<form action="select-boxes.html">
  <label for="category">Category:</label>
  <select name="category" id="category">
    <option value="easy">Easy</option>
    <option selected value="medium">Medium</option>
    <option value="hard">Hard</option>
  </select>
  <input type="submit" id="next" value="next &raquo;" />
</form>

Progressively enhancing with jQuery

In this example, I put jQuery right before the </body> tag and directly below jQuery, I start my new <script> tag where our code will sit:

<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
  // our code lives here
});
</script>
</body>
</html>

1 & 2. Making the Ajax request

Inside of the $(document).ready we want to say: “when the select box changes, make an Ajax request to load the article select box”:

$('#category').change(function () {
  var categoryName = $('#category').val();
 
  // for now, let's assume that <select id="articles"> exists
 
  // so our Ajax url could look like: select-boxes-medium.html
  $('#articles').load('select-boxes-' + categoryName + '.html');
});

Here I’m using the load method to take the contents of the file I’m requesting, and squirting it straight in to the $('#article') element – which, right now, doesn’t exist. So let’s create that now.

3. Create the article select box

We’ll create an empty variable: $article, and when the category is changed for the first time, we check to see if $article is null, and if it is, we create the article select box and assign it to $article (therefore preventing it from being created again):

var $article = null;
 
$('#category').change(function () {
  var categoryName = $('#category').val();
 
  if ($article == null) {
    $article = $('<select id="article" name="article"></select>').appendTo('form');
  }
 
  // note that now we're point to the $article variable
  $article.load('select-boxes-' + categoryName + '.html');
});

Now the form is working and creating the second select box properly, all we have to do is tidy up some of the buttons, since currently the “next” button submits the form.

4. Buttons

There’s three things we need to do:

1. Change the “next” submit button to a “button” button
2. If “next” is clicked, pretend like the category was changed (note: this part was accidentally omitted from the screencast)
3. Add a “read” button (which if we were progressively enhancing a real page, this would appear when the category was submitted the first time)

The code needs the following added to the end:

var $next = $('#next');
$next[0].setAttribute('type', 'submit'); // note: this is required due to a bug in jQuery
 
// note that this part is not in the screencast
$next.click(function () {
  $('#category').change();
});

Now inside of the Ajax request, we change the part that creates the article select for the first time and add:

  if ($article == null) {
    $article = $('<select id="article" name="article"></select>').appendTo('form');
    $next.remove();
    $('form').append('<input type="submit" value="read &raquo;" />');
  }

And that’s that.

You can check out the final product and the final working version – but please, please remember this is a contrived example, only designed to show you how easy it is to populate on select box with another.

You should follow me on Twitter here I tweet about jQuery amongst the usual tweet-splurges!

Related screencasts

1. Enabling the Back Button As we build more and more Ajaxy applications, and our…

Demo

If you find this demo doesn’t work as expected, it’s possibly due to the demo running from within an iframe. Try running the demo in it’s own window.

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Populating select boxes demo</title>
<style>
body {
  padding: 0 45px;
  background: url(http://jqueryfordesigners.com/wp-content/themes/j4d/static/images/article.png) repeat-y center bottom;
  max-width: 864px;
  margin: 20px auto;
}
 
body, select, input {
  font: normal 16px/22px Georgia;
}
 
h1 {
  font: normal 36px/36px Georgia;
  letter-spacing: -1px;
}
</style>
</head>
<body>
  <h1>Populating Select Boxes</h1>
  <form action="select-boxes.html">
    <label for="category">Category:</label>
    <select name="category" id="category">
      <option value="easy">Easy</option>
      <option selected value="medium">Medium</option>
      <option value="hard">Hard</option>
    </select>
    <input type="submit" id="next" value="next &raquo;" />
  </form>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
  
  var $category = $('#category'),
      $article = null;
  
  $category.change(function () {
    var categoryName = $category.val();
    
    if ($article == null) {
      $article = $('<select id="article" name="article"></select>').appendTo('form');
      $next.remove();
      $('form').append('<input type="submit" value="read &raquo;" />');
    }
    
    $article.load('select-boxes-' + categoryName + '.html');
  });
  
  var $next = $('#next');
  
  $next[0].setAttribute('type', 'button');
});
</script>
</body>
</html>