Drupal Guides

Building a jQuery Voting Widget

Let's write our first jQuery-enabled Drupal module. We'll build an Ajax voting widget as shown in Figure 17-2, which lets users add a single point to a post they like. We'll use jQuery to cast the vote and change the total vote score without reloading the entire page. We'll also add a role-based permission so only users with the "rate content" permission are allowed to vote. Because users can only add one point per vote, let's name the module "plusl."

You voted

Figure 17-2. The voting widget

We'll have to get some basic module building out of the way before we can get to the actual jQuery part of plus1. Please see Chapter 2 if you've never built a module before. Otherwise, let's get to it!

Create a directory in sites/all/modules/custom and name it plusl (you might need to create the sites/all/modules/custom directory). Inside the plusl directory, create the file plusl.info, which contains the following lines:

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

This file registers the module with Drupal so it can be enabled or disabled within the administrative interface.

Next, you'll create the plusl.install file. The functions within this PHP file are invoked when the module is either enabled or disabled, usually to create or delete tables from the database. In this case, we'll want to keep track of who voted on which node:

* 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',

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;

* Implementation of hook_uninstall().

function plus1_uninstall() { db_query('DROP TABLE {plus1_vote}');

Also, add the file plus1.css. This file isn't strictly needed, but it makes the voting widget a little prettier for viewing, as shown in Figure 17-3.

!		l
You voted
		You voted

No CSS With CSS

No CSS With CSS

Figure 17-3. Comparison of voting widget with and without CSS

Add the following content to plus1.css:

div.plus1-widget { width: 100px; margin-bottom: 5px; text-align: center;

div.plus1-widget .score { padding: 10px; border: 1px solid #999; background-color: #eee; font-size: 175%;

div.plus1-widget .vote { padding: 1px 5px; margin-top: 2px; border: 1px solid #666; background-color: #ddd;

Now that you have the supporting files created, let's focus on the jQuery JavaScript file and the module file itself. Create two empty files and name one jquery. plus1.js and the other one plus1.module, and place them within the plus1 folder. You'll be gradually adding code to these files in the next few steps. To summarize, you should have the following files:

sites/ all/ modules/ plus1/ jquery.plus1.js plus1.css plus1.info plus1.install plus1.module

+13 -3

Average user rating: 4.3 stars out of 16 votes