JQuery_ Novice to Ninja - Earle Castledine [94]
The serialize method sucks up input fields that have a name attribute attached to them. Therefore, if you want to take advantage of this feature, you’ll need to ensure that your fields are named:
chapter_06/14_sending_form_data/index.html (excerpt)
With our markup appropriately set up, we need only call serialize on a jQuery selection of the form itself:
var form_data = $("form").serialize();
Serializing the data converts it into the typical query string format containing the field name and value separated by ampersands:
name=Kellie+Kelly&tags=b-grade+has-been+rich&id=8
And if you’d rather have your data in a more organized format, you can use the oddly named serializeArray action. It’s oddly named as it returns an object (not an array) containing the key/value pairs of all the form fields.
Let’s take it for a spin:
chapter_06/14_sending_form_data/script.js (excerpt)
update: function() {
var form_data = $('form').serialize();
$.post(this.set_url, form_data, function() {
$('#status').text('Update successful!');
});
}
The $.post method is certainly easy to use! But, as we mentioned earlier, there’s no way of knowing if something went wrong—so there’s no way we could tell the user about it. You’re better off replacing that call with our new friend $.ajax. That way, as well as adding an “Update Successful!” message, we can also add error messages and attach a class for a spinner too:
chapter_06/14_sending_form_data/script.js (excerpt)
$.ajax({
type: "POST",
url: this.url,
data: form_data,
beforeSend: function() {
$('#ajaxDetails').addClass('progress');
},
error: function() {
$('#status').text('Update failed—try again.').slideDown('slow');
},
success: function() {
$('#status').text('Update successful!');
},
complete: function() {
$('#ajaxDetails').removeClass('progress');
setTimeout(function() {
$('#status').slideUp('slow');
}, 3000);
}
});
The last little interesting tidbit we added was a setTimeout, which runs in the complete event handler to slide away the message after a few seconds. To tie this all together, we simply call this update method when the Submit button is clicked:
chapter_06/14_sending_form_data/script.js (excerpt)
$('#update').click(function() {
CELEB.update();
});
This works nicely, and looks sharp—a job well done. Of course, as with the previous examples, our mock server is unable to respond to the data being sent and update the tags in a database. If you want to verify the data being sent, you can open up the Console tab in Firebug (which we discussed in the section called “Troubleshooting with console.log” in Chapter 4). Every Ajax request your page fires will show up in this display, and you can inspect the contents of each request, as shown in Figure 6.1.
Figure 6.1. Inspecting Ajax requests with Firebug
Ajax Ninjas? Check!
Our client is going bananas. There’s no way we can shut him up about it. But hey, it’s been a fairly impressive effort on our part: a fully functional, stable, dynamic image gallery and image tagger without doing a single page refresh. And we barely broke a sweat. But there’s still plenty more we can do!
Ajax (as we know it) started life as a buzzword and quickly became overhyped and misunderstood. Now that the hype has died down, we can all appreciate Ajax for the nifty tool it is. Thanks to jQuery, it’s a tool that’s extremely easy to wield—and a tool that’s extremely easy to become addicted to. With the growing number of cool third-party JSON APIs and mashup tools becoming available, there seems to be no limit to what you can accomplish with a little ingenuity!
Chapter 7
Forms, Controls, and Dialogs
In its infancy, the Web was a read-only medium. Discontent with a nearly infinite collection