Using Ajax in Drupal 6

John K. VanDyk confirmed that Pro Drupal Development 2^nd edition will be published early this summer. I don’t know about you but in Montreal it sure does not look like summer. We’re still in the dead of winter, and it’s one snowstorm after another.

Anywho, I got busy last night and, on a Drupal 6 install, I worked through chapter sweet seventeen of the Pro Drupal Development 1^st edition book. The title of the chapter is "Using jQuery".

(Hey, here is an idea for a thread: name the one computer book you’ve actually read from cover to cover in your life. My answer: Pro Drupal Development, and probably just a few other books.)

You’ll find attached to this post a working digg-like module, different enough from the Drupal-5-compliant one provided with the book that I don’t believe I’ll receive any email about me committing copyright infringement.

So here are the eight changes you should bring to the module plus1 to make it work in Drupal 6.

But before we delve into this, here is something you should know. If you’ve worked through the example at the beginning of the chapter where we add jQuery code to a node, and you have not seen the first paragraph fade in as it did in Drupal 5, don't be alarmed. You’ll have to first hide the paragraph. When you think about it... the fact that this worked as is with an earlier version of the jQuery library is a bug.

In Drupal 5, after adding the following to a node, you would see the first paragraph fade in:

<?php
drupal_add_js('$(document).ready(function(){
  $("#one").fadeIn("slow");
  });',
  'inline'
  );
?>
<p id="one">Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

In Drupal 6, you have to hide the paragraph first, then fade it in.

<?php
drupal_add_js('$(document).ready(function(){
  $("#one").hide().fadeIn("slow");
  });',
  'inline'
  );
?>
<p id="one">Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

Or you may harness the full power of jQuery by selecting the first paragraph of the node’s content, and make that paragraph fade in for the duration of 5 seconds, ie: 5000 ms.

<?php
drupal_add_js('$(document).ready(function(){
  $(".content p:first").hide().fadeIn(5000);
  });',
  'inline'
  );
?>
<p>Paragraph one</p>
<p>Paragraph two</p>
<p>Paragraph three</p>

On with the show.

1. Open and edit your plus1.install file. Table creation for modules has been abstracted into a Schema API in Drupal 6.

In Drupal 5, we created our table {plus_1} this way:

In Drupal 6, we do this instead:

Note that we’re creating a composite key as primary key. The voter and the node he votes for will always come in a unique combination. In other words, you can give a thumbs up only once for a any given content.

2. We then modify our plus1.info file.

In Drupal 5:

In Drupal 6:

('Version' is deprecated in Drupal 6.)

3. We change our use of the menu hook in plus1.module.

In Drupal 5 we had:

/**
* Implementation of hook_menu().
*/
function plus1_menu($may_cache) {
  $items = array();
  if ($may_cache) {
    $items[] = array(
      'path' => 'plus1/vote',
      'callback' => 'plus1_vote',
      'type' => MENU_CALLBACK,
      'access' => user_access('rate content'),
    );
  }
  return $items;
}

In Drupal 6, we do the following:

/**
* Implementation of hook_menu().
*/
function plus1_menu() {
  $items['plus1/vote/%'] = array(
    'title' => 'Vote',
    'page callback' => 'plus1_vote',
    // 'plus1' is the 0th arg. in the path, 'vote' is the 1st, 
    // and the node id is the 2nd...
    // hence, we pass array(2) to 'page arguments'
    'page arguments' => array(2), // where my wildcard is
    'access arguments' => array('rate content'),
    // always use MENU_CALLBACK for ajax requests
    'type' => MENU_CALLBACK,
  );
  return $items;
}
?>

Note that this symbol: % is a wildcard for the node hii-dee.

4. We modify the callback function plus1_vote($nid).

We have a new and improved way to write JSON in Drupal 6. We use the new function drupal_json($var = NULL). It sets the header for the JavaScript output to 'Content-Type: text/javascript; charset=utf-8'.

In Drupal 5:

/* This print statement will return results 
 * to the jQuery's request.
 */
print drupal_to_js(array(
  'score' => $score,
  'voted' => t('You voted'),
  )
);

In Drupal 6:

/* This print statement will return results 
 * to the jQuery's request.
 */
print drupal_json(array(
  'score' => $score, 
  'voted' => t('You voted'),
  )
);

5. We register our theme function.

In Drupal 6, all modules must register all their theme functions via the new hook hook_theme().

Therefore, we add the following function to our plus1.module file.

/**
* Implementation of hook_theme().
*/
function plus1_theme() {
  return array(
    'plus1_widget' => array(
      'arguments' => array('nid', 'score', 'is_author', 'voted'),
    ),
  );
}

6. We modify our theme function theme_plus1_widget($nid, $score, $is_author, $voted) to account for the change in signature of the function l() in Drupal 6.

In Drupal 5:

In Drupal 6:

7. We thoroughly clean up our act when it comes to our jQuery.

In the source code of our Drupal 5-compliant version, the file jquery.plus1.js contained this:

// $Id$
// Global killswitch: only run if we are in a supported browser.
if (Drupal.jsEnabled) {
  $(document).ready(function(){
    $('a.plus1-link').click(function(){
      var voteSaved = function (data) {
        var result = Drupal.parseJson(data);
        $('div.score').fadeIn('slow').html(result['score']);
        $('div.vote').html(result['voted']);
      }
      $.get(this.href, null, voteSaved);
      return false;
    });
  });
}

In Drupal 6, we will NOT use the method Drupal.parseJson — that function is deprecated in Drupal 6. We’ll use the jQuery.getJSON method instead.

// $Id$
// Global killswitch: only run if we are in a supported browser.
if (Drupal.jsEnabled) {
  $(function(){
    $('a.plus1-link').click(function(){
      $.getJSON(this.href, function(json){
        $('div.score').hide().fadeIn('slow').html(json.score);
        $('div.vote').html(json.voted);
      });
      return false;
    });
  });
}

8. Then we’ll go and read about this wonderful jQuery method jQuery.getJSON. For your convenience…