Blog

When looking for jQuery plugins, I always try to do the research to find simple to use, compact plugins. Most of the time, for Drupal sites, I will take the minimized version and throw it into the themes folder, or a module's "includes" folder. Here is a list of jQuery plugins that I have used multiple times, on various websites, and are probably the easiest to use.

1. jTabber

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

AJAX helps you create better, faster and more user-friendly web applications with its Javascript and HTTP base. It allows the page content to be updated without reloading a whole page.

In Drupal, AJAX functionality is provided through functions in the Javasript file drupal.js, and some AJAX functions are supported by Drupal core.

I am going to explain the autocomplete which is one of the AJAX functions implemented in Drupal. When users type into a text filed, new data from the server is dynamically loaded and displayed as a list of matching options. Exchanging data beteween client and server, and updating the content are handled by the autocomplete.js. The textfield type form input has the #autocomplete_path attribute which is the path that the AJAX autocomplete script uses as the source for autocompletion. You can easily implement the AJAX autocomplete to your form using the #autocomplete_path attribute.