It's blowing up big, Drupal 5.0 has 200% more AJAX!

200% more AJAX!A couple days back Drupal 5.0 was released and I spent a couple hours this afternoon porting this website (chapterthree.com) over to the new code. The migration was pretty straightforward and all of the modules and other functionality we use for this site has already been upgraded to work with 5.0.

This latest release is huge for Drupal as we talked about earlier and has a lot of new and punchy features (check the screencast here). One of the most important features, in my view, is the inclusion of the powerful JQuery and extensible AJAX library. There are lots of wonderful possibilities using lightweight and easy to use AJAX in Drupal.

A good example of the power of JQuery to bring a little more functionality to a website can be seen in the "comment preview" functionality of our blog - adapted from a technique on a wonderful JQuery blog. As we have mentioned, we are strong believers in HTML Literacy and providing users with a live preview of their comment as they type helps to teach and reinforce the learning and use of HTML tags. The JQuery code is pretty straightforward and works on all Drupal comment pages and can be made to work on a lot of other pages by modifying the CSS ID tag (#edit-comment) to another textarea that needs live previewing.

 

$(document).ready(function() {
$('#edit-comment').onefocus(function() {
    $('#edit-comment').parent().after('
Preview
 
');
  });
  var $comment = '';
  $('#edit-comment').keyup(function() {
    $comment = $(this).val();
    $comment = $comment.replace(/\n\n+/g, '

').replace(/\n/g, "
");
    $('#live-preview').html( $comment );
  });
});