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

January 16, 2007 - 5:56pm

Tags :

A couple days back Drupal 5.0 was released and I spent a couple hours this afternoon porting this website (chapterthreellc.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() { <br />	$('#edit-comment').onefocus(function() {<br />    $('#edit-comment').parent().after('<div id="preview-box"><div class="comment-by">Preview</div><div id="live-preview"></div></div>');<br />  });<br />  var $comment = '';<br />  $('#edit-comment').keyup(function() {<br />    $comment = $(this).val();<br />    $comment = $comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");<br />    $('#live-preview').html( $comment );<br />  });<br />});

Comments

Josh Koenig

January 18, 2007 - 2:21am

It's an exciting new day for web apps. I really think this kind of "live preview" stuff can help improve HTML literacy, and might be the thinking man's answer to faux-WYSIWYG editors.

Also, I've gone ahead and added a little something from Drupus to spice up this post. I hope you don't mind. ;)

Karl Swedberg (not verified)

January 21, 2007 - 6:59am

Hey Matt, thanks a lot for the mention. I had thought of the preview as more of a visual aid than a learning tool, so I'm pleased to see that it doesn't have to be just eye candy.

And speaking of WYSIWYG editors, Josh — you might be interested in this fledgling WYSIWYM project that is retooling to make use of jQuery throughout.

Cheers,

Karl