Charlie Griefer - jQuery

jQuery - Ensuring Unique Usernames in Real Time

Fri, 16 Oct 2009 11:40:00 -0500

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:

[More]

jQuery - A Traversal Quickie

Thu, 24 Sep 2009 13:37:00 -0500

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

[More]

jQuery - What You Can do with the Data Method

Wed, 23 Sep 2009 15:06:00 -0500

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.

[More]

ColdFusion and jQuery - New tutorial(s) on LearnCF.com (Part 3)

Mon, 21 Sep 2009 13:54:00 -0500

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.

jQuery - Dynamically Adding Form Elements

Thu, 17 Sep 2009 02:34:00 -0500

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.

[More]

ColdFusion and jQuery - New tutorial(s) on LearnCF.com (Part 2)

Wed, 09 Sep 2009 13:20:00 -0500

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.

ColdFusion and jQuery - New tutorial(s) on LearnCF.com

Thu, 03 Sep 2009 12:26:00 -0500

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.

jQuery - Manipulating Table Row Background Colors (Part 3)

Thu, 20 Aug 2009 11:52:00 -0500

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.

[More]

jQuery - Manipulating Table Row Background Colors (The Sequel)

Wed, 19 Aug 2009 11:37:00 -0500

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>

[More]

jQuery - Manipulating Table Row Background Colors

Tue, 18 Aug 2009 12:27:00 -0500

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>

[More]

jQuery - Accessing Dynamic Elements

Fri, 14 Aug 2009 23:38:00 -0500

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.

[More]

jQuery - Accessing Checked Checkboxes

Fri, 14 Aug 2009 22:42:00 -0500

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

[More]

jQuery - A Love Story

Fri, 14 Aug 2009 10:14:00 -0500

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.

[More]

Add Twitter to BlogCFC

Tue, 11 Aug 2009 02:34:00 -0500

I'm pretty close to being done with my latest re-skinning effort of BlogCFC, and wanted to add a Twitter Pod to display my most recent tweet.

I've done some work recently with the Twitter API for blitztweets.com, so I didn't think it would be too difficult of a task.

I added a method to blog.cfc, added an application variable with the last update date/time (so as to only update every 'n' minutes and avoid potentially hitting the rate limit), and then created the pod itself (aptly named twitter.cfm).

After reinitializing the blog, everything looked good. I waited a few minutes, made a new tweet, and reloaded the page. Unfortunately, it didn't update.

[More]

42 Different Kinds of Awesome - CrossSlide jQuery Plugin

Wed, 30 Jul 2008 13:30:00 -0500

Via Scott Pinkston on #coldfusion...

While I haven't had the opportunity to dive as deeply into jQuery as I'd like, I've incorporated quite a few jQuery plugins into some recent projects, and have always been impressed with the quality of the output as well as the ease of implementation.

Last night Scott brought the CrossSlide jQuery plugin to my attention. I'm definitely in awe.

The plugin plays an image "slideshow" of sorts. It utilizes a fade transition effect, as well as a panning effect to create an overall effect that I'd only previously seen done via Flash. There are a few configuration options as well, including the option of not panning the image, and panning/zooming (what they refer to as the "Ken Burns effect").

This is one of those plugins that, unfortunately, I really have no need for at the moment... but it's slick enough that I've been wracking my little brain trying to figure out how I could force it into an upcoming project.

Check it out!