Drupal 6 Basic Javascript w/ jQuery

Here at SOTC we have been working with Drupal as of late where we are working on updating our site. One of things that I couldn't find a whole lot of documentation on it is getting simple basic Javascript stuff working in Drupal 6. So to get people moving in the correct direction I decided to throw out a small tutorial on this, especially since Drupal 6 has built in support for jQuery, a Javascript library - which should make adding fancy stuff pretty easy.

Below we have a small mock-up of what we are going to build using jQuery and Drupal. A very simple table where the data rows will change style when hovered over and out. This is about the as basic as it gets with jQuery - so good for us I need to warn you though the source code for the live example on this page is not exactly what we do for Drupal. At the bottom of the post you can, however, download the source for the Drupal module that is being used - my very simple test module.

Engine	Root Bulk Temp. (R)	Mid Span Bulk Temp. (R)	Tip Bulk Temp. (R)
CFM56	2250	2310	2295
GE90	2300	2322	2315
F404	2380	2399	2401
CF34	2108	2127	2118
TF39	2090	2106	2098

Ok starting off we are going to take a look at the basic code for the test module. My test module adds a new page which will hold our test content, in this case the page is /testmodule. The page will return content from a callback function named _testmodule_page. The content function will create some test data about jet engine blades (yeah I am geeky) and pass it to a template file to render. The template file is, of course, added by overriding hook_theme in the module. So without further ado here is the code for testmodule.module.

function testmodule_perm()
{
return array('access testmodule content');
}

function testmodule_menu()
{
$items = array();
$items['testmodule'] = array(
'title' => 'Test Module Page',
'page callback' => '_testmodule_page',
'access arguments' => array('access testmodule content'),
'type' => MENU_CALLBACK,
);
return $items;
}

function testmodule_theme()
{
return array(
'testmodule_page' => array(
'template' => 'testmodule-page',
'arguments' => array('engines' => NULL),
),
);
}

function _testmodule_page()
{
$engines = array();
$engines[0] = array(
"model" => "CFM56", "root" => 2250,
"mid" => 2310, "tip" => 2295);
$engines[1] = array(
"model" => "GE90", "root" => 2300,
"mid" => 2322, "tip" => 2315);
$engines[2] = array(
"model" => "F404", "root" => 2380,
"mid" => 2399, "tip" => 2401);
$engines[3] = array(
"model" => "CF34", "root" => 2108,
"mid" => 2127, "tip" => 2118);
$engines[4] = array(
"model" => "TF39", "root" => 2090,
"mid" => 2106, "tip" => 2098);
return theme('testmodule_page', $engines);
}

Now we need to define that template file which I am not going to go over in much depth because it simply creates a table and outputs the data.

id="testcontent">
id="testmodule-table">







</thead>

<? for($i = 0; $i ($engines); $i++) : ?>






<? endfor; ?>

class="engine">Engine	class="root">Root Bulk Temp. (R)	class="mid">Mid Span Bulk Temp. (R)	class="tip">Tip Bulk Temp. (R)
class="engine"><?= $engines[$i]['model'] ?>	class="root"><?= $engines[$i]['root'] ?>	class="mid"><?= $engines[$i]['mid'] ?>	class="tip"><?= $engines[$i]['tip'] ?>

Now this will look like a basic table when built and displayed but we want it to look a bit nicer, right? Well we are going to use a little css to take care of this. Below you can check out the css I added to make the table a little bit nicer looking - put in testmodule.css.

#testmodule-table
{
width: 530px;
font-size: 13px;
border-collapse: collapse;
}

#testmodule-table tr
{
height: 25px;
}

#testmodule-table td
{
border-bottom: solid 1px #AAAAAA;
}

#testmodule-table .root, .mid, .tip
{
text-align: center;
}

#testmodule-table thead td
{
font-weight: bold;
border-top: solid 2px #888888;
}

All the above should look pretty normal for just about anyone who has ever used any css. So we have the css to create a pretty table but we need to tell drupal to add the css file to the header links. We do this with the function drupal_add_css which simply takes the path to css file to add and it handles the rest. But where do we put this function? Well there is a perfect place but we need to add a preprocess function for our template. Ours is named after our module and then the theme template, testmodule_preprocess_testmodule_page. In this function we use the Drupal function drupal_get_path to get the path to our module. Then we append the name of our css file to it and call drupal_add_css. You can see the new function for testmodule.module below.

function testmodule_preprocess_testmodule_page($engines)
{
$module_path = drupal_get_path('module', 'testmodule');
drupal_add_css($module_path . '/testmodule.css');
}

Next we are going to add one more css declaration and our Javascript to change the style when the row is hovered. First the new css style is a class called tr-hover which is added to our css file. All it does it change the background to a light gray.

.tr-hover
{
background: #EEEEEE;
}

Now on the fun stuff - playing with the Javascript. Drupal 6 has made it easier than ever to get Javascript added to your site using jQuery. The first thing to learn is that Drupal abstracts the functionality of jQuery a little bit. If you are familiar with jQuery you will probably remember that all jQuery functionality uses a custom document ready event to add functionality to a page. In Drupal all this is done for us - we simply have to add a function to the Drupal.behaviors object. At runtime Drupal will call all the attached functions on Drupal.behaviors, which in this case will include our code.

We are going to add the testmodule function to the Drupal.behaviors object which will hold our Javascript. Inside the function we use jQuery's hover event and attach it the table body rows of our table. You can see in the code below we use the css selector#testmodule-table tbody tr with jQuery's $ function to grab the relevant elements and add the event to them. All that is left is to actually add and remove the css class using jQuery's functions addClass and removeClass to the element on hover in and out. I put all this code into the file testmodule.js.

Drupal.behaviors.testmodule = function(context) {
$("#testmodule-table tbody tr").hover(function()
{
$(this).addClass("tr-hover");
},
function()
{
$(this).removeClass("tr-hover");
});
}

Lastly, we need to get our Javascript file added to the page, which is easy because we have already learned how to do it. We use almost the same code as adding the css file but with a slightly different function to add the file: drupal_add_js. And that pretty much wraps the basics of adding and executing Javascript in Drupal 6. As promised you can download the testmodule source code. Feel free to leave a comment if you have any questions or remarks.