jQuery

jQuery.queue() – An explanation of the jQuery FX method

So today I came across a bit of a UX problem while using jQuery; I wanted to submit some form content using ajax but the feedback messages were flashing up so quickly they were illegible.

The simplified situation I ran into was:

  1. The user would submit a form of data using ajax,
  2. Content would be validated by jQuery,
  3. The form would disappear and be replaced with a message saying it was in the process of submission,
  4. That message would then be replaced with either a success or failure message formed from the ajax response.

The problem was that in some cases the form would be handled so quickly that the message from step 3 would appear for only tiny fraction of time before disappearing again. In one hand this is obviously good as it means the user isn’t kept waiting too long while the submission is processed, but on the other hand it can distract from the user experience as they didn’t get time to take in what was there.

I sit firmly in the camp that you shouldn’t allow your users to be dazzled by messages popping up or content whizzing around, no matter how trivial the message content is. Also if users are submitting a form they’ll expect at least some delay in a form being submitted. Plus you’re using ajax so it saves the monotony of reloading whole pages anyway… so you should still be quids in when it comes to time scales.

The Coding Problem in jQuery

[js]// Show and specify the message to the user
$(".message_box").show().text("Submitting form…");

// Fire off the form data using ajax
$.ajax({
url: ‘/process_data.php’ ,
type: ‘POST’ ,
data: ‘field_name=’ + txt_name + …
success: function(data) { $(".message_box").text("Success"); } ,
error : function(data) { $(".message_box").text("Failed"); }
} // Close ajax[/js]

Now ideally I’d have proceeded the ajax call with something like this:
[js]$.delay(2000).ajax({[/js]
or even
[js]$(document).delay(2000).ajax({[/js]

but that is badddddddd. That’ll throw an error and your jQuery will drop out.

The jQuery.queue() method

My solution I came across (of which I’m sure there are several others) is to use queue(), a method to directly manipulate the fx queue. You essentially call the queue method passing the ajax function in as the callback value, such as:

[js]$(document).delay(2000).queue( function () {
$.ajax({
<em>…</em>
)} // Close ajax()
$(this).dequeue();
}); // Close queue()[/js]

This nicely delays the ajax by 2 seconds, long enough for the original message to appear usefully to the user. The dequeue() method is required to allow for future manipulations of the queue, something I didn’t realise to begin with and caused me a lot of grief.

I’ve simplified the scenario considerably but I hope its still useful, I’ve never used the queue() method before but I’m sure I’ll be using it again.

For further reading here’s the API documentation for the .queue() method

Hope this has helped,

Leave a Reply

Your email address will not be published. Required fields are marked *