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).

A question came up yesterday on the jQuery mailing list where somebody wanted to effectively "embed" data into a link. They essentially wanted to call a function on click, but needed to pass arguments. Since jQuery is supposed to be unobtrusive (e.g. "Find Something, Do Something"), how can we tell jQuery that, when a specific link is clicked, there's specific data associated with that link?

The jQuery data() method allows you to do just that.

The long-awaited and eagerly anticipated (by me) conclusion to my 3-part tutorial on learncf.com on using jQuery to return JSON data from a ColdFusion CFC.

The tutorial can be found here. When all is said and done, you'll have built this page, and hopefully you'll have a good (better?) understanding of how it all works.

As always, hit me up with questions or comments.

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.

Part 2 of what is now a 3-part tutorial on using jQuery and ColdFusion has been posted to http://www.learncf.com.

To recap, Part 1 showed how to use jQuery's getJSON() method to pull data from Twitter's public API.

The current installation shows how to use that same getJSON() method to pull data from a ColdFusion CFC method, and output it to the current page.

A future installment will add some bells and whistles using various jQuery methods including show(), hide(), fadeIn(), fadeOut() and the new-in-jQuery1.3 live() method.

Check out the latest installment at http://tutorial43.learncf.com/. As always, I look forward to your comments or questions.

A couple weeks back, Paul Kukiel asked me if I'd put together a tutorial for http://www.learncf.com showing how to use jQuery and ColdFusion together.

I started writing, and about 14 pages later (including code samples), submitted the tutorial showing how to use jQuery's getJSON() method to retrieve data from a ColdFusion CFC.

I started out wanting to explain what getJSON() does in terms that a ColdFusion user would easily understand, and then gradually take that concept and move towards a jQuery solution. I illustrated this by retrieving data from Twitter using one if their API methods.

Once the reader had a grasp of using getJSON() to retrieve data from Twitter (or any external site), I turned the focus to using getJSON() to retrieve data from a ColdFusion CFC.

Because it was a bit lengthy, Paul thought it would be best to break it out into 2 separate tutorials (and I agreed with this... in fact, I thought it might have worked well as 3 tutorials).

Part 1 has been posted at http://tutorial42.learncf.com/. Part 2 should be along shortly (depending on how quickly Paul can get it formatted for screen) :)

If you have any comments or questions on any of the material that's covered, let me know.

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>