After posting my article, "Ajax and Accessibility: You're Doing it Wrong (Hijax)", Jeremy Keith, the fellow who coined the term, actually posted asking about working examples. Well, I didn't have any that I could share off hand, but I posted a few things which were in the same spirit of working Accessible Ajax, or Hijax. Thinking about it more, I figured, well, it's pretty easy, I'll just slap together a sample. So away we go...
A Basic, Standard and Accessible Form
And, the PHP script (for brevity I'm dropping DocTypes, etc., but you should always use them):
So right away you can see this is pretty basic, it simply echos out what was entered into the form field, but that's all you need to demo the technique. You can see we've started with something that might be a standard form.
Add Some Ajax and Hijack Your Script
Since this article isn't really intended to show how to append Ajax to a form, rather how unobtrusive scripting can applied to enhance a form using Ajax, I'm not going to go on at length about Ajax, rather just use my own Ajax Object script, as it works fairly well for this sort of thing.
I'm not going to get all fancy with event handlers either, just get the point out the door. The basic steps are:
- Modify the PHP script to process two ways, one with Ajax, one without
- Determine if the browser supports Ajax
- Override the form's onSubmit handler
- onSubmit, collect and format the form data into a query
- POST the data via your Ajax script
- Output the data received
- Return false so the form is not submitted normally
Modify Your Server-Side Script
Essentially, we're going to run the same script both ways, and only slightly differently if there's an additional parameter called "ajax" passed up to the PHP.
You can see we've wrapped the HTML body portions of the page within two "if" statements, checking for the "not" existance of the "ajax" Post Variable, with the function ISSET(). First, for the page HEAD and opening BODY tags, then, second for the closing BODY and HTML tags.
Detect Support and Override Your Form
Back to the form. When the browser loads the form, onload you'll need to detect the support given for the XMLHttpRequest objects that power Ajax. With my Ajax Object (AO) script, that's as easy as creating a new AO object, and checking the AO.init property to be set to true.
There's several things to look at here. First, if there is browser support, you're going to run a function which is going to override the form submission. Here, we're also resetting the bSupport test object back to null, becuase it was created only for the sake of the browser support test. Finally, when support is determined to not exist, we're going to return false rather than take an action.
Now, there's even more going on here. First, we're going to access the form via the DOM FORM collection. Second, we're going to set it's onsubmit handler to an anonymous function which will fire onsubmit. Here, we're going to need to do a couple things.
First things, we're going to need to grab the form data and create a Query String style format. I've hacked it in my script by hard coding it in my getQuery() function, but you're probably going to want to spend the time to create a flexible library function which can properly format a query string. Then, you'll pass it to your Ajax handler. Finally, you'll want to "return false" so that the form does not get processed by the form in the traditional way.
When creating that query string however, we're going to grab the form data and also add a variable called "ajax" so that the PHP script can see that this is not the traditional form submission.
We need to execute our Ajax call. Using my Ajax Object script you create an object with a URL, optional Query String data, and then create an AO.onload handler. With that set up, you then POST your data.
The Ajax script that you've created needs to handle the returning string of content that the PHP form is going to include. In this case again, I've used a built-in method from the Ajax Object which sets the innerHTML of a given element (here, with the ID of "output') to the returning string. The better solution here, for the purposes of my Ajax Object script would be to check for other return codes with a failure and do something else, but this gets the point over.
Full Working Demo
You can see the full working demo here, and included is a download link for you to play with it if you'd like.
Possibly Related Articles
Commenting is closed for this article.