Photo from Chile

A Cool jQuery Plugin - FastConfirm

I was working on the Engage app for cf.Objective() and I wanted to quickly add a confirmation dialog to the delete link for proposals. Now I'm not a particularly advanced jQuery developer, but I do know that there are a lot of people out there who are, and many of them have written plugins to help us lazier folks get things done. Through the power of Google I found a jQuery Plugins Page that lists all plugins that have been tagged with the term confirm. Wanting something quick and easy, I was drawn to one called Fast Confirm.

I checked out the demo and read through the docs, then saw some comments on the bottom of the docs page that suggested precisely how to implement the plugin for my exact use case. Within 10 minutes I had my confirmation dialog up and running! Here's the code:

view plain print about
1<link type="text/css" href="/css/jquery.fastconfirm.css" rel="stylesheet" />
2<script type="text/javascript" src="/js/jquery.fastconfirm.js"></script>
3<script type="text/javascript">
4    $(function(){
5        $(".confirm").click(function() {
6            $(this).fastConfirm({
7                position: "right",
8                onProceed: function(trigger) {
9                    window.location.href=$(trigger).attr("href");
10                },
11                onCancel: function(trigger) {
12                }
13            });
14            return false;
15        });
16    });

With the above script on my page, all I have to do is add a class of confirm to any anchor tag and I'll get a confirmation dialog whenever the anchor is clicked.

The plugin does allow you to change the question asked in the dialog, as well as a number of other options, but I was happy to accept the default of "Are you sure?". I think this is a great, simple plugin. Kudos to Pierre-Jean Parra for writing it and contributing it to the community.

jQuery Quickie - Checking Whether an Element Exists

I'm still a relative noob when it comes to jQuery, so today, when I had a need to check whether a particular form field existed, I had no idea how to do it. Of course some quick Googling brought me an answer, from the jQuery for Designers site by Remy Sharp.

The quick answer is that you can test the length property of any jQuery object, and if it returns zero then the element doesn't exist. For example, what I wanted to do was to disable a form field if another form field existed, so I wrote the following code:

view plain print about
1if ($("#fieldA").length != 0) {
2    $("#fieldB").attr("disabled", "disabled");

Reading through the comments on that page, I saw a suggestion by Kat Reeve to add the following to a standard JavaScript include file:

view plain print about
1jQuery.fn.exists = function() { return (this.length > 0); };

Which would allow me to change the above code to:

view plain print about
1if ($("#fieldA").exists()) {
2    $("#fieldB").attr("disabled", "disabled");

Nice, innit?

Adding a Dynamic jQuery Progressbar to the ColdFusion Twitter/Google Maps Mashup

Because my ColdFusion driven Twitter/Google Maps Mashup is so slow, I decided that it would be nice to have a dynamic progress bar, which updates the status as each of the user's friend's addresses are being looked up. I knew that the jQuery UI project has a Progressbar widget, so I did a quick Google for "jQuery Progressbar ColdFusion", and, no big surprise, came across a blog post by Ray Camden on the topic. That was enough to get me started, but Ray didn't cover creating a dynamic progress bar that is updated by the currently running page.

I figured that I could build something using cfflush, and I was not mistaken. Here's a summary of what I did:


jQuery Auto-Filtering Table

I've been using jQuery for about a year now and I must admit that pretty much any JavaScript that I wrote prior to that looks ugly to me now. I know I'm nowhere near the first person to say this, but if you write JavaScript and you aren't using jQuery, you should check it out. Now.

Anyway, I wanted to show you how easy it is to do something cool with jQuery. The next thing I'll admit is that much of what I'm doing with jQuery involves using existing plugins written by other, more seasoned JavaScripters than me. But enough talk, here's the table: