Instead of the user looking at a blank screen I created a small dialog using jQuery UI.

Now instead of seeing this:

Blank Screen

You see a nice modal dialog with an animation…

jQuery UI Dialog

I wanted the dialog to display when the user clicked on the link to the PDF.

First I added an ‘opener’ class to my links:

<a href="linktofile.pdf" class="opener">PDF File</a>

Getting a basic dialog box with jQuery is easy…

$(document).ready(function() {
var $dialog = $('<div></div>')
.html('Please be patient while the PDF file loads. This may take a moment depending on the size of the PDF and the speed of your network connection.')
.dialog({
  autoOpen: false,
         title: 'Loading PDF File...'
  });
  $('.opener').click(function() {
	$dialog.dialog('open');
  });
});

Simple Dialog

To spruce things up I added a small PDF icon and ‘spinner’ graphic from AjaxLoad.

Note: the spinner isn’t tied to the load time but gives the impression to the user ‘something’ is happening.

$(document).ready(function() {
	.html('<span class="floatright"><img src="img/icon_pdf.png" alt="PDF Icon"/></span>Please be patient while the PDF file loads. This may take a moment depending on the size of the PDF and the speed of your network connection.<br /><br /><img src="img/spinner.gif"/>')

Fancy Dialog

The final touch was making the dialog ‘modal’ and fading the background. This was done by adding a simple ‘modal’ attribute:

$(document).ready(function() {
    .dialog({
		autoOpen: false,
		title: 'Loading PDF File...',
		modal: true
		});

With a bit of CSS to style to UI element:

.ui-widget-overlay {
    background: black;
    filter: alpha(opacity = 50);
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
}

This gives me the faded background…

jQuery UI Dialog

Now when the user clicks on a PDF link the dialog pops up and stays there until the PDF is loaded.

Quick tip:  to prevent your link from actually firing you can modify the script by adding a ‘return false;’ which will prevent the defaulk link action from occuring which is useful while you test:

$('.opener').click(function() {
	$dialog.dialog('open');
	return false;
});

On the client side it uses the excellent jQuery validation plugin, and one issue I’ve run into was error message placement when using radio or checkbox fields.

By default the plugin puts the error message in an awkward location:

This is fairly easy to fix however…

The validation plugin has a LOT of options (documentation) one of them being errorPlacement.

There are a few tweaks we have to make in our file for ValidateThis to make use of this new code.

First lets create a new jQuery script for our errorPlacement and wrap it in a cfsavecontent:

<cfsavecontent variable="validateCode">
<script type="text/javascript">
$(document).ready(function() {
$("#frmMain").validate({
 errorPlacement: function(error, element) {
 if ( element.is(":radio") )
 error.insertBefore( element.parents('div.ctrlHolder') );
 else if ( element.is(":checkbox") )
 error.insertBefore( element.parents('fieldset').children('div.ctrlHolder').first() );
 else
 error.insertAfter(element);
 }
 });
});
</script>
</cfsavecontent>

This defines our errorPlacement and puts a few checks in place to see if we are dealing with a checkbox, radio or normal form field.  We can then define where we want the message placed using normal jQuery syntax.   This will probably require some experimentation depending on your form layout.

To get ValidateThis to use our new errorPlacement we need to load our scripts in a particular order.

1. First we load the jQuery validation plugin script
2. With our script in a cfsavecontent we load it next
3. Followed by ValidateThis code to load it’s rules

<cfset event.addJSAssetFile( "validate/jquery.validate.pack.js" ) /> 

<cfset event.addJSAssetCode(validateCode) /> 

<cfset event.addJSAssetCode(event.getModelGlue().getValidationService().getInitializationScript(JSIncludes=false)) />
<cfset event.addJSAssetCode(event.getModelGlue().getValidationService().getValidationScript(objectType="Form")) />

Here I am using some new features in the latest Model-Glue alpha to load my JS scripts. You could easily replace this with normal script calls.  The important thing to note is we need to load our errorPlacement script before we load the ValidateThis scripts.

If we reload our form now we can see the error message has moved to a better location:

I also turned up a few more:

• jQuery 1.2 Cheatsheet (PDF)
• jQuery Cheatsheet (wallpaper)

We’re already planning the next release and have a huge roadmap that contains plugins like grid, tooltips, menus, colorpickers, autocompletes and much more.

One of my favorite jQuery tools has also been updated.  Karl Swedberg has updated his ‘jQuery bookmarklet‘.  If you have ever found yourself working on a site without jQuery – you can ‘jQuerify’ it using Karl’s bookmarklet.

It’s a nice little tool that allows you to play around with jQuery on a page that doesn’t already have jQuery loaded and see the results immediately.

A great tool to use with Firebug!

Today however I did manage to update an application I’m working on with the latest jQuery 1.2.6 and WOW what an improvement.  I’m using the Autocomplete and Validate plugins as well as a bunch of show/hide stuff and it’s noticeable faster.  It’s a REALLY long form and previously performance was a bit sluggish. Some of that may be due to my code not being as optimized as it could be but with the recent jQuery update things are much snappier overall.

I have no way to actually measure the difference but my ‘seat-o-the-pants’ meter says it’s faster.

This month I’m also doing a jQuery presentation for our local AppDev group which I’m looking forward to and which I need to get started on!!

The AJAX Libraries API is a content distribution network and loading architecture for the most popular open source JavaScript libraries.

Google currently supports the following libraries:

• jQuery
• prototype
• script.aculo.us
• MooTools
• dojo

A bit more information can be found in this OStatic article.

Today John Resig (author of jQuery) has a great blog post about Ajax Accessibility in which he discusses Google’s use of ARIA in Google Reader and also mentions  Fire Vox:

Fire Vox is an open source, freely available talking browser extension for the Firefox web browser. Think of it as a screen reader that is designed especially for Firefox.

In addition to the basic features that are expected of screen readers, such as being able to identify headings, links, images, etc. and providing navigational assistance, Fire Vox provides support for MathML and CSS speech module properties. It also works on Windows, Macintosh, and Linux.

I’ll certainly be setting this up today to give it a whirl! If you are interesting in accessibility, 508, and AJAX I’d check out John’s post!

You can browse the jQuery Subversion repository online. The nice thing is you can see exactly when the author last update anything by looking at the revision and age.

Click the file you want. A new Trac page will open showing you the source with line numbers, etc. Simply scroll all the way to the bottom of the page and click “Plain Text”. This will open a plain text view of the source which you can then save locally.

Adobe – This is one of our upcoming partners. We’ve been working with them to try and make sure that some of their upcoming releases go smoothly. This is a case where a corporation will be providing copies of jQuery for developers to use (a different use case for us, as this is typically coming from open source projects). We’ll be seeing a lot more from this partnership in the upcoming months, which will be exciting. They’ve been great about keeping communication open – conference calls, emails, and patches – a great partner.

Interesting to see Adobe going this way – they already have Spry, and ColdFusion included parts of ExtJS…

Go jQuery!

Using remote validation to help with captchas

• Remote validation to check if the user entered the correct captcha, without forcing him to submit the form first

That is a great idea! I know with some of these captchas I have a difficult time deciphering the text often confusing “Os” and zeros, etc. It would be great to get feedback before submitting the form on your successful interpretation of the image :)

Too bad my application doesn’t have a captcha :(