Hello, jQuery Form Plugin
Lately I've been working on a lot of ajaxy projects and have found the jQuery Form Plugin to be indispensable for such work. It's a super clean plugin for applying ajaxy behaviors to a regular ol' HTML form. To showcase the plugin here on my blog, I wrote a little "Hello, World" snippet that uses the plugin to pull images from Flickr's image feed.
HTML Markup
First, let's get our markup on. We'll build a vanilla HTML form that asks the user for a tag to be searched on Flickr. After the form, we'll also declare an empty <div> that will eventually be updated with the results of our Flickr tag search.
<form id="flickrSearchForm" method="get" action="">
<label for="tags">Photos tagged with </label>
<input id="tags" name="tags" placeholder="any Flickr tag" />
<input type="submit" value="Find" />
</form>
<div id="flickrSearchResults"></div>
jQuery Dependencies
Next we need to include jQuery and the jQuery Form Plugin. The base jQuery library is available via Google's CDN. The form plugin is hosted on github.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
Unobtrusive Goodness
Now we can finally get down to the business of unobtrusively wiring some ajax operations into the otherwise unremarkable HTML form.
// apply form plugin
jQuery('#flickrSearchForm').ajaxForm({
url: 'http://api.flickr.com/services/feeds/photos_public.gne',
data: {
tagmode: 'any',
format: 'json',
jsoncallback: 'displayFlickrSearchResults'
},
type: 'get',
dataType: 'script',
beforeSubmit: function(formDataArray, form, options) {
disableSubmitAndClearPreviousResults();
}
});
How easy was that? With just a few lines of code we decorated the form to fire off an ajax request to Flickr when the user presses the submit button. The form plugin took care of a lot of little details like ...
- providing a pre-submit hook for clearing out previous search results
- serializing the form's inputs into the ajax request's query string
- appending some constant data values to the ajax request's query string
- automatically invoking the result of the JSONP response as a JavaScript function
End Result
Here's the end result once the code snippets above are put together.
