Charlie Griefer

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.

What's ColdFusion DevCamp? Organized by Sid Maestre (manager of BACFUG), Rachel Luxemburg (Group Manager, Developer Relations at Adobe), and Luke Kilpatrick (who recently organized the highly successful pre DevCamp San Francisco), the event aims to introduce ColdFusion to non-ColdFusion people. Whether it be designers or developers using other languages, this is a day-long hands-on introduction to the wonderful world of ColdFusion.

The event takes place on Saturday November 7th, 2009 at the Adobe office in San Francisco.

The current agenda:

• 9:30-10:30 - Welcome, Laptop Setup assistance, coffee and donuts.
• 10:30-11:00 - Keynote (State of ColdFusion).
• 11:00-6:00 - ColdFusion - What's possible (demos of ColdFusion tags).
• 11:00-6:00 - Break into small teams and begin projects.
• 6:00-7:00 - Share projects.
• 7:00-7:30 - Raffle and close.

Lunch will be provided and served around 12:00 noon.

If you know of anyone in the Bay Area that's been curious to learn about ColdFusion, let them know about this event. If you're in the Bay Area and already know ColdFusion, register as a mentor. The more mentors that sign up, the better the experience will be for the students.

The cost for this all day hands-on event? Absolutely free. All that you need to bring is a laptop and a desire to learn.

Read more about it at http://www.cfdevcamp.org/. Hope to see you there!

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.

Adobe MAX 2009 is coming up fast (October 4-7), and thousands of developers, designers, and decision-makers will soon be descending upon Los Angeles, CA. Certainly, MAX is one of the more extravagant conferences... and while it's worth the price of admission, I wanted to let people know about a few upcoming events that might be a bit more "budget-friendly".

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>