I came across an interesting problem recently while working on www.cocktailsrus.com. I was adding a new rating system allowing members to rate cocktails on a scale of 1-5. I wanted to do something that was accessible, but also visually appealing and appropriate, so that this:
could easily and accessibly be converted into this:
The answer, of course, was to write a jQuery plugin that would be called on document.ready() and convert the default radio-buttons to active images – but only for users who have JavaScript enabled. I duly wrote the plugin, and it does everything I intended (e.g. you can customize the images, change the maximum number on the scale etc.). It’s free for anyone to use, and you can download it here.
However, during testing I came across a problem. The site makes extensive use of Ajax, and when the partial page downloads to the client the radio buttons are briefly visible before being replaced by the images. The problem is that the screen is being updated before document.ready() runs.
The obvious solution is to use a callback. I use two different Ajax methods – the built-in jQuery .load() method and .ajaxSubmit() (part of the jquery form plugin). Both have callbacks that run when the Ajax call returns, like this:
$(‘article’).load(url, function () {
$(‘#ScoreSection’).rate();
});
Unfortunately, while this looked like a promising solution, the problem remained: there is a perceptible delay between the DOM updating and the callback running. Once again, the user sees the radio-buttons briefly before they are replaced. So how to fix the problem?
The answer lies in an old animation technique – make the change off-screen and only make it visible after it has completed. In this case, that means:
- Use jQuery to create an empty div element and assign the result to a variable
- Assign the return from the Ajax call to the variable
- Run the plugin against the updated variable
- Update the DOM with the variable
With .load():
var $temp = $(‘<div />’);
$temp.load(url, function () {
$(‘#ScoreSection’, $temp).rate();
$(‘article’).html($temp);
});
With .ajaxSubmit():
var $temp = $(‘<div />’);
$form.ajaxSubmit({ target: $temp,
success: function () {
$(‘#ScoreSection’, $temp).rate();
$(‘article’).html($temp);
}
});
Using this technique, the images replace the radio-buttons before they become visible, even when using Ajax. For an extra refinement, add a test inside document.ready() to make sure that the original method is only invoked if the Ajax callback has not already run. In this case, that’s a simple matter of testing the visibility of the radio-buttons, and only running the .rate() method if they’re visible.
For other related information, check out these courses from Learning Tree:
jQuery: A Comprehensive Hands-On Introduction
