So, I Wrote a Book

Instant jQuery 2.0 Table Manipulation How-to

Instant jQuery 2.0 Table Manipulation How-to

A few months back I was contacted by a representative of Packt Publishing asking me if I’d have any interest in writing a book on using jQuery to perform HTML table manipulation. Apparently they had seen a previous blog entry that I had written on manipulating table row backgrounds using jQuery and thought that the concept could be fleshed out into a book. Turns out they were right. Instant jQuery 2.0 Table Manipulation How-to has made it to the final steps of publication as we speak.

It’s a long and unfortunate title, but that’s OK as I didn’t come up with it. The title isn’t mine. Everything inside is, and I hope that people find that to be more entertaining and more educational and just all around better than the title. Of course, that assumes that you’re going to buy the book. You do plan on buying the book, don’t you? If you don’t buy the book then all of that knowledge just sits there between the pages (or electrons, if you’re into the epub scene) and does nobody any good.

Read More»

Proper Placement of the Increment Operator

I admit that there are certain nuances to programming that I’ve never fully been able to wrap my brain around. One in particular is the proper placement of the increment operator:

( for var i = 0; i < 10; i++ )

versus…

( for var i = 0; i < 10; ++i )

I was certainly aware that there’s a difference… but never fully comprehended what that difference was. And it never seemed to be a big deal, as placing the increment operator after the operand always seemed to work for me.

…until today, that is.

Read More»

jQuery Exercise: Tabbing in Textarea

The other day I came across a question on stackoverflow, where the developer wanted to allow his users to use the tab key in a <textarea>. Of course, the issue is that by default, when a form element has focus and the tab key is pressed, the next form element (either consecutively or via the tabindex attribute, if used) gets focus.

I thought that’d be an interesting quick exercise, so I set about writing some code. The good news is that I got it to work, and relatively quickly. The bad news is that by the time I did, somebody else had answered… and with a better answer than mine.

The “good” answer is to use an existing plugin, and Tab Override was suggested. Generally, as programmers, we try not to reinvent the wheel, so I voted that answer up. But now I’ve got some code sitting here doing absolutely nothing, so I thought, “hey… blog entry” :)

Read More»

jQuery – Ensuring Unique Usernames in Real Time

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:

Read More»

jQuery – A Traversal Quickie

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

Read More»

jQuery – What You Can do with the Data Method

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.

Read More»

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

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

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.

Read More»

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

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

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.

Page 1 of 212
© Copyright Charlie Griefer