January 31, 2007
B2B: Ajax in JQuery with special effects
Today’s article is going to cover using the excellent JQuery library to implement an AJAX username availability checker (along with a bit of eye candy to show the results). The use of visual effects with AJAX can occasionally be quite tricky, depending on what you need to do - fades by definition will take a certain period of time to execute, so you need to stagger your calls correctly to get your data fading out and back in again at the correct time (after the AJAX calls have fired).
Like the previous JQuery introduction - JQuery Pop-up Menu Tutorial - we’ll be using the latest JQuery library, and a seperate external javascript file to contain our behaviours and logic.
I’m going to skip the HTML in the hopes that you’ll actually whip up a test page yourself, and start playing around with JQuery - but obviously you need a quick description of the elements we’ll be using:
- span with ID
usernameLoading, containing an AJAX spinner. - a with ID
usernameCheckand href ofjavascript:void(0) - span with ID
usernameResult
Onto the javascript:
behaviour.js
1 $(document).ready(function() {
2 //username availability checker
3 $('#usernameLoading').hide();
4
5 $('#usernameLoading').ajaxStart(function() {
6 $(this).show();
7 }).ajaxStop(function() {
8 $(this).hide();
9 });
10
11 $('#usernameCheck').click(function() {
12 $.post("/users/check", {
13 username: $('#UserUsername').val()
14 }, function(response){
15 $('#usernameResult').fadeOut();
16 setTimeout("finishAjax('usernameResult', '"+escape(response)+"')", 400);
17 });
18 });
19
20 });
Yep, the bulk of the action occurs in less than 20 lines of javascript (not including one function that we’ll get to now).
Starting with our standard JQuery attach function, we immediately hide the usernameLoading DIV, as this is the DIV that contains our AJAX spinner image. Lines 5 to 9 simply say that whenever an AJAX event starts and stops, the respective code should be run. This obviously only works if there is one AJAX widget on a page, so you’ll have to be clever otherwise.
Line 11 says that when our usernameCheck a element is clicked, we fire off a $.post JQuery AJAX event, to the /users/check URL, with the correct username value from the input element.
You can view other AJAX methods and examples on the library homepage.
Line 14 says that once the call has finished, pass the response through to the anonymous function which fades out the current usernameResult DIV and then calls a setTimeout on another method called finishAjax.
Line 16 could be replaced by the following two lines:
$('#usernameResult').html(response);
$('#usernameResult').fadeIn();
If you try the above, you’ll find that the sparkly fading in and out effect is somewhat ruined by random flickering and nonsense (at least in my Firefox) - to get around this, I use setTimeout.
1 function finishAjax(id, response) {
2 $('#'+id).html(unescape(response));
3 $('#'+id).fadeIn();
4 } //finishAjax
Be careful in passing your response text through; as you can see in line 16 of the initial listing, I escape the text and then unescape it in the finishAjax function. By waiting 400 milliseconds before replacing the inner HTML of the DIV and then fading it back in, we avoid the horrible flickering and such of the special effect.
The rest of the magic occurs at the /users/check URL - the username parameter is passed through and accessed in PHP’s $_POST array. It is then checked against the database, and depending on whether the username already exists or not, two different sets of HTML are passed back to the javascript AJAX handler.
In PHP, it’s as simple as this:
check.php
if ($userWasInDatabase) {
print '<strong>Username is taken already!</strong>';
} else {
print '<strong>Username available.</strong>';
} //else
I think this turned out to be more of a HOWTO than a tutorial, but I think I’ll blame JQuery for that, everything just seems to happen without you having to even try hard. I also realise that I’ve skipped a lot of explanations, but I think you really need to pick up the library and play with it yourself to see how easy it is.
Comments(14)