Charlie Griefer

A question came up yesterday on the cf-talk mailing list. The question involved a user who is filling out a form and choosing a user name. The poster wanted to check in "real time" (after the blur event on the username input) that the name is unique.

As Steve "Cutter" Blades points out, this can be accomplished using Jörn Zaefferer's Validation Plugin for jQuery. This plugin is essentially the defacto standard for doing validations via jQuery. It can be implemented very easily to do the most basic validations, but it can also be extended to do any number of complex validations.

That being said, I thought it still might be worthwhile to see a quick example of how to build out that specific functionality from scratch. How can we use jQuery to give a user real-time feedback as to whether or not a username is available? Start with the markup below:

Paraphrased from the jQuery mailing list:

I have a table with links inside of it. Each <tr> has a unique ID assigned to it. How can I get the ID of the <tr> that contains the link that was clicked?

The following code snippet was included:

<tr id="1">
    <td>Name</td>
    <td>E-Mail</td>
    <td><a href="#" class="accept">Accept</a></td>
</tr>

jQuery provides a number of DOM traversal methods. While the initial thought might be to go with parent(), that would get the <td> containing the link. You could double up on parent(), but that seems a bit kludgy (IMO).

You know the situation. You have a form with 'x' number of text inputs. Eventually, you realize 'x' may not be enough for all users. But in the interest of keeping the page clean, you don't want to arbitrarily continue to add these elements.

What you really want to do is show a minimal amount initially, and then give the user the option of adding as many more (within reason) as that particular user might need. You might go about doing that by creating 100 fields and setting their CSS display attribute to "none", while adding a slick JavaScript function to allow the user to display as many as they need. And that would work, but...

Why create any DOM elements that aren't going to be used? Wouldn't it be better to dynamically create an element and add it to the DOM as the user needs it? (Hopefully you're nodding in affirmation) Great! Let's do it with jQuery.

A couple of days ago, we used jQuery to automatically highlight any table rows where the value of a specified <td> was less than $100.

Yesterday, we used a different method (traversing the DOM) to highlight any table rows where the value of the "Sale Price" was 50% or more off of the value of the "Regular Price".

Today, we're going to combine both into one application. Both of the original methods will work the same. The only thing we're going to add is a clearRows() method, which will run before either of the two methods described above. This will remove the background color from all table rows, effectively "resetting" the table before either of the two highlight methods run.

Given the table below, allow the user to see which items are under $100, -or- which items are reduced by 50% or more.

Yesterday we looked at using jQuery to manipulate table row background colors based on a specific set of criteria. It was a relatively straightforward effort as we simply referenced a particular class name. However, sometimes we don't have total control over the markup, and will need to rely on our ability to traverse the DOM.

Given the table below, allow the user to see which items are marked down by 50% or more.

<table id="inventoryTable" cellpadding="3" cellspacing="0">
<thead>
<tr>
	<td>Original Price</td>
	<td>Sale Price</td>
	<td>Description</td>
</tr>
</thead>
<tr>
	<td>100.00</td>
	<td>65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td>200.00</td>
	<td>110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td>200.00</td>
	<td>74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>

Given the table below, allow the user to see which items are under $100

<table id="inventoryTable" cellpadding="3" cellspacing="0">
<thead>
<tr>
	<td>Original Price</td>
	<td>Sale Price</td>
	<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
	<td class="originalPrice">100.00</td>
	<td class="salePrice">65.00</td>
	<td>Green widget (Yellow stripes)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">110.00</td>
	<td>Lavender Widget (White dots)</td>
</tr>
<tr>
	<td class="originalPrice">200.00</td>
	<td class="salePrice">74.00</td>
	<td>Red Widget (Solid)</td>
</tr>
</tbody>
</table>

Given 'n' number of dynamically generated elements on a page, all starting with a particular string (e.g. "menu_1, menu_2, menu_3 ... menu_n"), and without knowing how many there are, use jQuery to access these elements.

Assuming the markup below, determine which checkboxes are checked.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title></title>
</head>

<body>

<input type="checkbox" name="cb1" id="cb1" value="a" /> A<br />
<input type="checkbox" name="cb2" id="cb2" value="b" /> B<br />
<input type="checkbox" name="cb3" id="cb3" value="c" /> C<br />
<input type="checkbox" name="cb4" id="cb4" value="d" /> D<br />
<input type="checkbox" name="cb5" id="cb5" value="e" /> E<br />

<input type="button" id="myButton" value="Which are Checked?" />

</body>
</html>

Using "POJS" (plain old JavaScript), we'd do the following (after adding an onclick attribute to the button):

Over the past year or so, I've been endeavoring to learn jQuery. I put it off for a long time. I've always been a fan of JavaScript, and have been used to writing it for as long as I can remember. I couldn't justify taking the time to learn a new way to do something that I already knew how to do.

But little by little and more and more I kept hearing people espouse the virtues of jQuery. I finally resigned myself to sit down and give it a fair shake.

At first, yes it was a little daunting. I think I was still subconsciously resisting this new way of doing things. But little by little I started to see the power of jQuery. It isn't that it's just a different way to do something that I already know how to do... but it's a quicker and easier and more powerful way.