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!

Now lets take a look at the code to see how I did it…

First my form is generated dynamically so I’ve simplified it quite a bit for this example:

My form:

<div class="editfield">
	 OD
	 OM
	 DERT
	 DIR
	 NTP
	 ORAR
</div>

<div>Loading... </div>

<label for="approval">Approving Official Signature</label>

This gives me my series of radio buttons, a div to contain my “Loading” animation, and finally the text field which will receive my approvers name.

For the dynamic loading graphic – there are a few sites out there with graphics you can grab or create. Then it’s a simple matter of creating a div container to display it and some simple CSS:

Loading CSS:

#loading {
	background: #fff url('../img/ajax-loading.gif') left no-repeat;
	color: #369;
	display: none;
	font-weight: bold;
	margin: 1em 0;
	padding-left: 20px;
	}

This initially hides the loading graphic (display: none) and we’ll later use jQuery to flip that on when we need it.

Next – the jQuery magic! For help installing and getting jQuery setup – check out the “How jQuery Works” tutorial on the jQuery wiki.

For this example – I’m also using the jQuery Form plugin. This provides the fieldValue method which allows me to grab the value of the selected radio button.

We’re going to assume you have the jQuery library and form plugin loaded… here is the jQuery code:

	$(document).ready(function(){
		$("input:radio[@name='divisionid']").click(function() {
			var foo = $(this).fieldValue();
			$.ajax({
	  			type: "POST",
	  			url: "index.cfm?action=telework.getchief",
	  			dataType: "html",
	  			cache: false,
	  			data: "divisionid=" + foo,
	  			success: function(msg) {
	  				$('#approval_2_Yes_2').val(foo);
	  				$('#approval_2_Yes_2_dsp').val(msg);
	  				// alert('Division ID = ' + foo);
					}
			});
		});
	});

So let’s step through this…

First we grab the radio button value (divisionid) when a user clicks on one of the radio buttons. We then assign the value of that radio button (this) to a variable (foo).

$("input:radio[@name='divisionid']").click(function() {
var foo = $(this).fieldValue();
});

One thing to remember when working with CSS and jQuery – some things are case sensitive – so ‘divisionid’ != ‘divisionID’.

Next we setup our Ajax call – this is all you need in jQuery to make an Ajax request. I’d suggest checking out the jQuery docs on Ajax.

$.ajax({
	type: "POST",
	url: "index.cfm?action=telework.getchief",
	dataType: "html",
	cache: false,
	data: "divisionid=" + foo,
	success: function(msg) {
	}
});

Here we are setting up our Ajax request parameters:

• Type: we are going to make a POST request
• URL: the URL where we are going to fetch our data from
• DataType: What we are going to return – in our example we’ll just fetch a simple HTML string
• Cache: Whether or not to cache the results
• Success: What to do on a successful request

Behind the scenes this is a Fusebox application – so when the user clicks a radio button – jQuery makes a request to index.cfm?action=telework.getchief. This does all kinds of Fusebox stuff but eventually runs a query using the data we passed in (data: “divisionid=” + foo – ie: divisionid=4).

Query using divisionID as argument:

		select
			signature_name
                        , org
		from
			tbldivision
		where
			divisionid = #arguments.divisionid#

This is returned to a very simply layout with no HTML:

#qryApprovers.signature_name & " (" & (qryApprovers.org) & ")"#

And if the request is successful – we write our string back to our form field (the alert is handy for testing):

success: function(msg) {
  $('#approval').val(foo);
  $('#approval_dsp').val(msg);
  // alert('Division ID = ' + foo);
}

Here I’m writing our original radio button value (foo) to a hidden field (approval). I’m also writing the results of our Ajax request (msg) to my display field (approval_dsp) which overwrites the existing value ‘(select division above)’.

So this should work – (unless I’ve bungled something up) – but there is no indication to the user anything is happening. We want Web 2.0 and need a spinning ‘loading’ graphic!

jQuery makes this super easy by providing the ajaxStart and ajaxStop methods:

$('#loading').ajaxStart(function() {
  $(this).show();
}).ajaxStop(function() {
  $(this).hide();
});

So now we’re simply saying – when an Ajax request starts – show $(this) which is our #loading div which we had originally set to display: none in our CSS. When the Ajax request finishes we hide it again. Simple!

Hopefully this example has piqued your interest in jQuery and demonstrated how easy it is to use. If you have questions, comments or suggestions on how to improve the jQuery above – please leave me a comment!