Blog

I always get a really good sense of accomplishment when I write a lot of code and it does what I want. I sit back and breath a sigh of relief until someone shows me that I could have done the same thing with 1 line of code. Surely, one line of code can't accomplish 'everything' I want, right? Well, almost.

Included with Drupal is jQuery...obviously...but not so obvious is a jquery function called ajaxForm. The task at hand was to ajaxify the Drupal comments for a Video content type, so that you could comment on the video without the page refreshing and interrupting video playback.

I started writing some custom jQuery, collecting all the form field values into a data array, and using $.post to send the data to a url, which I then created a page callback for using Drupal's menu system.

$('#comment-form input#edit-submit').bind("click", function(e) {  
   var title = $('input#edit-subject').val();
   var body = $('textarea#edit-comment').val();  
   var wall = $('select#edit-friends option').val();  
   var star = $('select#edit-vote-1 option').val();
   
   var data = {
     'title' :title,
     'body'  :body,
     'wall'  :wall,
     'star'  :star
   }
   
   $.post('/video/comment', data, function(data) {
     alert(data);
   });
   
   return false;
   
 }) 

No problems so far...the form successfully posts to the url and I have all the data to work with now. But how do I mimic the comment submit? I don't want to write a bunch of SQL...I'm just a designer!

Enter ajaxForm. It gathers all the information from the form elements and submits the form, all automatically! All you have to do is this:

$('#comment-form').ajaxForm();

For more information about usage, and options, see:
http://malsup.com/jquery/form/