Syndicate

Feed
Home

Using Ajax in Drupal 6

Thursday, 20 Mar 2008 — Caroline Schnapp

John K. VanDyk confirmed that Pro Drupal Development 2nd 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 1st 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, so different from the Drupal-5-compliant one provided with the book, that I don’t believe I’ll receive any email about me committing some copyright law 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, quiet your mind. Do not be alarmed. (I was quite flabbergasted when it happened to me.) 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... well, 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:

<?php
// $Id$
/**
* Implementation of hook_install().
*/
function plus1_install() {
  switch ($GLOBALS['db_type']) {
    case 'mysql':
    case 'mysqli':
      db_query("CREATE TABLE {plus1_vote} (
        uid int NOT NULL default '0',
        nid int NOT NULL default '0',
        vote tinyint NOT NULL default '0',
        created int NOT NULL default '0',
        PRIMARY KEY (uid,nid),
        KEY score (vote),
        KEY nid (nid),
        KEY uid (uid)
      ) /*!40100 DEFAULT CHARACTER SET UTF8 */");
      break;
    case 'pgsql':
      db_query("CREATE TABLE {plus1_vote} (
        uid int NOT NULL default '0',
        nid int NOT NULL default '0',
        vote tinyint NOT NULL default '0',
        created int NOT NULL default '0',
        PRIMARY KEY (uid,nid)
      );");
      db_query("CREATE INDEX {plus1_vote}_score_idx ON {plus1_vote} (vote);");
      db_query("CREATE INDEX {plus1_vote}_nid_idx ON {plus1_vote} (nid);");
      db_query("CREATE INDEX {plus1_vote}_uid_idx ON {plus1_vote} (uid);");
      break;
  }
}
?>

In Drupal 6, we do this instead:

<?php
// $Id$
/**
* Implementation of hook_install().
*/
function plus1_install() {
  // Create tables.
  drupal_install_schema('plus1');
}
/**
* Implementation of hook_schema().
*/
function plus1_schema() {
  $schema['plus1_vote'] = array(
    'description' => t('The table used by the Plus1 module.'),
    'fields' => array(
      'uid' => array(
        'description' => t('The primary identifier for the voter.'),
        'type' => 'int',
        'unsigned' => TRUE,
        'not null' => TRUE),
      'nid' => array(
        'description' => t('The node that gets a vote.'),
        'type' => 'int',
        'unsigned' => TRUE,
        'not null' => TRUE),
      'vote' => array(
        'description' => t('The vote.'),
        'type' => 'int',
        'size' => 'tiny',
        'unsigned' => TRUE,
        'not null' => TRUE),
      'created' => array(
        'description' => t('The timestamp of when the voter voted.'),
        'type' => 'int',
        'unsigned' => TRUE,
        'not null' => TRUE)),
    'primary key' => array(
      'uid',
      'nid'),
    'indexes' => array(
      'score' => array('vote')),
  );
  return $schema;
}
/**
* Implementation of hook_uninstall().
*/
function plus1_uninstall() {
  // Remove tables.
  drupal_uninstall_schema('plus1');
}
?>

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:

name = Plus 1
description = "A +1 voting widget for nodes. "
version = "$Name$"

In Drupal 6:

; $Id$
name = Plus 1
description = "A +1 voting widget for nodes."
core = 6.x

('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:

<?php
$output .= l(t('Vote'), "plus1/vote/$nid", array('class' => 'plus1-link'));?>
?>

In Drupal 6:

<?php
$output .= l(t('Vote'), "plus1/vote/$nid", array('attributes' => array('class' => 'plus1-link')));
?>

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…

This module has been committed to Drupal CVS. The link to the project page is http://drupal.org/project/plus1.
AttachmentSizeHitsLast download
plus1.tar12 KB383 days 18 hours ago
Last edited by Caroline Schnapp about 1 week ago.

One file is attached to this posting. Login or register to download this file.

| |

Printer-friendly version | 4829 reads

Comments

Thu, 2008-03-20 23:47 — Morbus Iff (not verified)

I really hope the chapter

I really hope the chapter isn't called "Using Jquery" - it shows an utter lack of copyediting, and one of the most common, and egregious mistakes in any sort of writing: improper use of names. It's "jQuery", not Jquery (or, in your case, jquery). /me starts waxing poetic about googling for people, xeroxing rollerblades and white-outting typos whilst rollerblading. Fiddle-hee, fiddle-hoo!

Thu, 2008-03-20 23:55 — Caroline Schnapp

It's spelled correctly in the book

My bad. I white-outted the typos in my post.

Tue, 2008-04-29 00:38 — Fly by night (not verified)

***Warning: Pot calling kettle black***

@Morbus Iff Many things can be said better with humility.

Tue, 2008-06-10 16:46 — Fly by night (not verified)

@Morbus

Wow. Just rip the guy apart over a name. I know it's jQuery too but no reason to be a snob over it!

Sun, 2008-06-22 12:11 — f1vlad

Thanks

Hey thanks for a fantastique overview on converting this tutorial from drupal 5 to drupal 6. It's too been a book I read from cover to cover.

I actually needed this for work and was starting to convert original plus1 with zero exprience writing module for 6.x. Then decided to google "plus1" just for the hell of it and that's how I've come across your site :)

What I ended up doing was changing this thing from plus1 to plus1minus1, digg style. I am actually also planning to allow unauthenticated users to submit a vote, and I plan to use their IP address as a unique identifier so they don't vote twice. Or may do it with a cookie. Don't know yet.

Seeing as this module has been discontinued: http://drupal.org/project/vote_up_down, I decided to make plus1 sophisticated enough to replace it.

I may submit it to CVS on drupal, I haven't decided yet. Hope you don't mind? I will give credit to you.

Thanks again, Vlad

Wed, 2008-07-30 14:05 — Caroline Schnapp

What I ended up doing was

What I ended up doing was changing this thing from plus1 to plus1minus1, digg style. I am actually also planning to allow unauthenticated users to submit a vote, and I plan to use their IP address as a unique identifier so they don't vote twice.

I created a project for the module on Drupal.org. Maybe I should add an option to the module for minus 1 functionality. Damn it, then the name of the module really should have been plus1minus1, just like yours.

Using the IP address as unique identifier for anonymous voting seems like a better idea at first glance, and it'd be easier to implement too. People can clear their cookies (wicked people...).

Maybe I'll see you there: http://drupal.org/project/plus1

Wed, 2008-07-30 14:19 — f1vlad

Well I have decided to

Well I have decided to release the code on sf.net for now, because drupal CVS admins are taking forever.

http://sourceforge.net/projects/plus1minus1/.

There are some screenshots, I styled it a little bit:

http://sourceforge.net/project/screenshots.php?group_id=232327

Anonymous voting yes some users can clear cookies etc. I've setup code to use IP address, but then changed back to cookies because where server is hosted it's VMWare and for some reason it doesn't see outside visitor's IP addresses. All visitors to that server appear as having same IP.

So anyway, even to a newbie developer I think it's pretty easy to modify. Here's module's code:

http://plus1minus1.cvs.sourceforge.net/plus1minus1/plus1minus1/plus1minu...

It's still pretty fresh but a good starting point to those who may need this.

Tue, 2008-06-24 01:30 — Caroline Schnapp

Glad I could help, Vlad

Hope you don't mind? I will give credit to you.

Sure, no problem. And thank you :-)

Mon, 2008-07-07 20:23 — Quevin (not verified)

Patiently Waiting For Pro Drupal Development 2nd Edition

I hope Matt finishes this soon! Lullabot's been spending time with a DVD learning series recently, so maybe that's taking up the time. I watched the first cut, and it's not bad. Covers a lot of stuff for newbies (including myself). So, it's not a bad supplement to the new edition. I just hope v.7 isn't too much different, now that I'm spending most my time with v.6.

Tue, 2008-07-08 12:44 — Caroline Schnapp

Learning Drupal 6 Module Development

I hope Matt finishes this soon!

Amazon's publication date now for the second edition is August 25, 2008.

To me this is end of summer.

There's another great book on module development for Drupal 6 that you can get now: Learning Drupal 6 Module Development. It really is a great book too.

Tue, 2008-07-29 22:33 — Chris.king@rickyroad.com (not verified)

Please submit this to the drupal repository ASAP

Please submit this work to the drupal.org repository as soon as possible. What you have written verbatim.

If it does have bugs it is as at least good enough for a development snapshot release. The best way to work out any issues with this code will be to get it in front of as many developers as possible who can collaborate on the project.

If you don't feel comfortable doing it I can do it for you and you can contribute any changes to that project. I think the plus and minus features are good ideas. And user should only be able to digg/bury if they are logged in.

Wed, 2008-07-30 12:35 — Caroline Schnapp

Done

This module has been committed to Drupal CVS. The link to the project page is http://drupal.org/project/plus1.
Wed, 2008-07-30 13:38 — Chris.king@rickyroad.com (not verified)

Great.

I will check it out. I am planning on using this module on rickyroad.com to rank games.

Thank you for the work you have done. This is what makes open-source a success.

Wed, 2008-07-30 13:56 — Caroline Schnapp

You're welcome

The CSS applied to the voting widget out of the box is blah. The widget needs CSS styling. The module does come with a CSS file, but the rules in it beg for serious CSS overriding.

Eventually, I should make the widget more appealing out of the box.

Thank you so much for the nudge, Chris. I needed a little push.

I wonder if the module should support anonymous voting eventually. It's certainly something I would not use myself, though.

Wed, 2008-07-30 14:04 — chris.king@rickyroad.com (not verified)

It looks great so far

We have put it on a sandbox server and it is working so far. Can you add the "Topherker" account to the developers list for our team? We would like to add a quick administration form so we can filter what nodes can have the widget and which wont. I will add the necessary artifacts and commit the changes in the next day or two. That is if we have your permission to do so.

Wed, 2008-07-30 14:07 — Caroline Schnapp

I will add you now.

The module really needs an admin page to select content types, for sure.

Thank you!

Wed, 2008-07-30 14:11 — Caroline Schnapp

Do you have a CVS account?

I am unable to grant topherker with CVS access to the module.

Wed, 2008-07-30 14:25 — chris.king@rickyroad.com (not verified)

My account is having some issue

I don't have contributor status at the moment for the CVS root. Let me send off an email to the team. I will get back to you.

Wed, 2008-07-30 15:03 — chris.king@rickyroad.com (not verified)

The CVS admins way have an issue with this

There may be an issue with a drupal 5.x version of plus1 and this version have a separate project space. If there is a project for a module that works in an earlier version of Drupal they do not want a separate project for the module for a new version of Drupal. They need to create a branch in CVS for the new code. I'm sorry I didn't even think of that.

But having said that, I can't find the drupal 5.x version of this project so it is possible that it is okay. There are other voting modules but nothing that I can find that does this specifically. Do you know if there is a formalized plus 1 project for drupal 5 or previous? I don't want to fudge it, if there is a project out there it should be merged into one. It may possibly take some time and red taping but overall its worth it to have everything done in a structured way.

I am resubmitting the CVS application for "topherker" based on our other modules so during this app process your project shouldnt come under question.

I will keep you updated.

Tue, 2008-08-19 03:55 — Franck Laurès

Thanks

Thanks a lot for this great article : very usefull for writing ajax modules for Drupal 6 !

Tue, 2008-08-19 12:25 — Caroline Schnapp

Hello Franck

An other and far more useful 'tutorial' on Ajax is chapter 5 of Learning Drupal 6 Module Development by Packt Publishing. The title of the chapter is Using JavaScript and Ajax/JSON in Modules. I have two qualms about the author's implementation though:

  1. The author, Matt Butcher, does not take advantage of the new Drupal 6 function drupal_json(). He manually goes about setting a header and writing JSON with printf.

    Here is the function he uses to return JSON to the browser...

    /**
 * Callback to handle requests for philquotes content.
 * @return string JSON data.
 */
function philquotes_item() {
  $item = _philquotes_get_quote();  
  drupal_set_header('Content-Type: text/plain; charset: utf-8');
  printf(
    '{ "quote": { "origin": "%s", "text": "%s"}}', 
    $item->title, 
    $item->body
  );
}

    While this would work for all modern browsers, and makes use of a Drupal helper function:

    /**
 * Callback to handle requests for philquotes content.
 * @return string JSON data.
 */
function philquotes_item() {
  $item = _philquotes_get_quote();  
  drupal_json(array('text' => $item->body, 'origin' => $item->title));
}

  2. The author uses a deprecated Drupal function to read the JSON returned from the Asynchronous HTTP request to Drupal, Drupal.parseJSON().

    Here is the content of the JavaScript file authored by Matt Butcher...

    // $Id$
/**
 * The Philquotes object.
 */
var Philquotes = {};
 
if(Drupal.jsEnabled) {
  $(document).ready(
    function(){
      $("#philquotes-origin").after("<a>Next &raquo;</a>")
        .next().click(Philquotes.randQuote); 
    }
  );  
  /**
   * A function to fetch quotes from the server, and display in the 
   * designated area.
   */
  Philquotes.randQuote = function() {    
    $.get(Drupal.settings.philquotes.json_url, function(data) {      
      myQuote = Drupal.parseJson(data);      
      if(!myQuote.status || myQuote.status == 0) {
        $("#philquotes-origin").text(myQuote.quote.origin);
      	$("#philquotes-text").text(myQuote.quote.text);
      }      
    }); // End inline function
  } // End randQuote function
}

    While the following works top notch, is far shorter, much more elegant (in my humble opinion), and it uses jQuery's getJSON()!

    // $Id$
if (Drupal.jsEnabled) {
  jQuery(function() {
    jQuery('<a/>').text('Next &raquo;').attr('href', '#').appendTo(jQuery('#block-philquotes-0')).click(function(ev) {
      jQuery.getJSON(Drupal.settings.philquotes.json_url, function(json){
        jQuery('#philquotes-text').text(json.text);
        jQuery('#philquotes-origin').text(json.origin);
      });
      ev.preventDefault(); // same as a return false;
    });
  });
}>

    Funny how I added the anchor... I went the other way around: I created the link and then appended it to the div element, using appendTo()... whereas the author found where to add the link first, and used the function after() on that insertion point in the document. Many ways to skin the kitty.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Allowed HTML tags: <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
12 + 6 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.