Need some help with your project? Contact me

3 cool tutorials for learning Ajax in Drupal

So i wanted to put this little article together because I am a fan of the idea behind Ajax. Being able perform server side processes without page reloads is simply awesome. So here you have 3 recent tutorials for building Ajax driven functionality in Drupal.

1. An interface for loading nodes with Ajax

This tutorial is Mike Kadin’s case study of a functionality he had to build for a client. The request was a page that listed node titles on the left side, that upon clicking, would load on the right side of the page the respective node content. And all this without page reload - with Ajax. Using Views to display the node titles and a basic page for the node content holder, he managed to do something really cool using Ajax. Read more about this here.

I also found a screencast that demonstrates similar functionality.

2. Using the Drupal Ajax Framework from an HTML link

Another example comes from Shane Thomas in one of his Daily Dose of Drupal episodes. He demonstrates how you can use the Drupal Ajax Framework with a simple HTML link as opposed to what most of the documentation focuses on - forms. His final result is an HTML link that dynamically calls a simple php time() function that after 5 seconds fades out and brings back the same link. He accomplishes this using Ajax and some jQuery magic.

Read more about it here and watch the video here.

3. Attaching Ajax events to non-form elements

This is another tutorial that looks at using Ajax with something other than Drupal’s Form API. What this article demonstrates is how to dynamically load a custom page declared with hook_menu() by using Ajax. Also pretty interesting and I am sure very useful. You can read this one here.

So there you have it. If you know of any other interesting recent tutorials on using Ajax in Drupal feel free to drop a link in the comments. Hope this helps.

Some related articles you might enjoy

Add new comment

You must have Javascript enabled to use this form.