Adding CSS and JS to a cached block in Drupal 7

In Drupal 7, if you try adding CSS and/or JS using drupal_add_cs() and/or drupal_add_js() inside hook_block_view(), you will soon find that your CSS and JS files are not included when that block is cached. This of course is no good, as blocks often require the CSS to look right, and the javascript to behave as desired.

Here is an example of what doesn't work:

Migrating (not updating) comments (or other core types) from Drupal 6 to Drupal 7


In the process of rebuilding my site, I decided to build from scratch, rather than attempting to upgrade my installation. With my old installation, I had tried out multiple modules, changed themes multiple times, and played around with the database when I didn't fully know what I was doing, leaving me with a system that worked, but at times was buggy. For this reason, I thought it better to build fresh and import.

As such, I needed to import the comments from my Drupal 6 installation to my new Drupal 7 installation. This is easier said than done - comments have received a major restructuring, and use different database tables in Drupal 6 than they did in Drupal 7, and the column names the comment system uses has also changed.

JavaScript - Passing Arguments to Anonymous Functions Without Firing the Function

I recently had a situation where, within a loop, I needed to create an onload function for an image I was creating on the fly. Here is an simplified outline of what I was trying to do:

var i, img;
for(i = 0; i < imagePaths.length; i++)
  img = new Image();
  img.onload = function()
  img.src = imagePaths[i];

Ubercart - overriding the cart contents table on the checkout page

I have run across situations where I have needed to override the table on the checkout page of ubercart. An example is bilingual e-commerce site that I have created, in which the title is different between languages. The English title is shown by default on the checkout page, but I needed to swap that in with a Japanese title.

Doing this is a tricky process, as Ubercart bypasses a lot of Drupal APIs. I eventually figured out how to do this in a module, by overriding the cart pane theme using hook_theme_registry_alter(), and swapping out the theme function with a theme function in my own module.

In this example, my module is named belly.

Step 1: Override the default theme function using hook_theme_registry_alter()

function belly_theme_registry_alter(&$themes)
	$themes['cart_review_table']['function'] = 'belly_cart_review_table';

Drupal API Firefox search add-on

I regularly search the Drupal API for code. Anyone using Drupal does this. I previously used a Firefox add-on called 'add to search bar' that allowed any search on pretty much any page on the web to be added to the firefox browser toolbar.

However, bukem has created two addons that create this functionality, and do it well. Add to search bar, while it worked, never worked the first time, and had no autocomplete. The two search engines bukem has created both work every time, and also have autocomplete, just to make things a little easier.

Themeing Drupal 7 Forms (Including CSS and JS)


Theming forms in Drupal 7 is mostly the same as Drupal 6, however there are some changes in how things are done in Drupal 7, and we will be exploring those changes in this tutorial. We will be working within a module called 'form_theme', and will create a form that looks like this:

My name is [FORM INPUT] [FORM INPUT] and I am [FORM INPUT] years old

The form inputs will initially display the words 'First name', 'Last name' and 'Age', which will then be removed when the user clicks on the input, and added again if the user clicks outside the input without entering a value.

What we will be covering in this tutorial:

  • Themeing a form
  • Attaching jQuery (JavaScript) to the form
  • Attaching CSS to the form

As the main goal of this tutorial is to show how to theme forms, I will not be going in depth into some of the other code that is not relevant to themeing. As such, to understand this tutorial, you will need an understanding of the following:

  • How to create a module in Drupal 7
  • How to create a form in Drupal using drupal_get_form()

Themeing Drupal 7 forms into tables with checkboxes or radios

This tutorial is for Drupal 7. The Drupal 6 tutorial is here: Themeing Drupal 6 forms into tables with checkboxes


Turning forms into a table of information, such as can be seen on the users administration page (admin/people) or the content administration page (admin/content) is a much easier process in Drupal 7 than it was in Drupal 6. In Drupal 6 it required some tricky logic, combined with a theme function. Drupal 7 removes the need for most of that.

In this tutorial, I will be putting together a nice little table that looks like the following:

| ❏ | First Name | Last Name
| ❏ | Indiana | Jones
| ❏ | Darth | Vader
| ❏ | Super | Man

Calling a function after an #AHAH event (Drupal 6)

In Drupal 6, I've at times in the past needed to fire off a function after an AHAH callback. The problem here is that AHAH is a pre-built set of functions by Drupal, and as far as I can tell, the only function it executes after completion is Drupal.behaviors. However, I personally don't see anything in the Drupal object to differentiate whether Drupal.behaviors is being fired on initial page load, or after an AHAH event. jQuery to the rescue! jQuery offers a nice little .ajaxComplete() function that is fired off after every Ajax event. We can use this function to fire off whatever other function we want when AHAH is complete.

Highlighting HTML columns with jQuery and CSS

Sometimes we want to highlight table columns when they are hovered over. Table rows are easy - it's as simple as adding tr:hover{background:red;} to your CSS. This will cause all table cells in a row to be red when the row is hovered over. However, columns are not as easy. The main reason behind this is that HTML tables are grouped by row, not by column. This means that while it is easy to select a group of table cells as a row (using tr in your CSS, or targeting tr tags in your javascript), it is not as easy to group table cells by columns.

You may think that you can use the html colgroup and col tags, but alas, such is not the case. They will allow for grouping elements by columns. However, these tags are deceptive. While they do allow for some limited styling of columns, they are not actually parents of the td tags that are in the column, and do not respond to the :hover attribute in CSS, nor do they trigger the javascript onmouseover event. Now, if this last statement didn't make sense to you, don't worry, it's not really important. What it is important is that you understand that it takes javascript to be able to highlight an HTML table column. And that is what this tutorial is going to show. It's possible to do this using pure javascript, but I'm a jQuery guy, so I will be showing my jQuery method of doing this.

Themeing Drupal 6 forms into tables with checkboxes

This tutorial is for Drupal 6. The Drupal 7 tutorial is here: Themeing Drupal 7 forms into tables with checkboxes or radios.

Turning forms into a table of information, such as can be seen on the users administration page (admin/user/user) or the content administration page (admin/content/node) is not the easiest process in Drupal 6. Even looking at the code that is used to create these pages, it can be hard to see what exactly is going on. So lets take a look at how to do this.

First, let's look at our final goal. Drupal comes bundled with a nice little function for creating tables, theme_table(). This function requires two arguments: $header, an array containing the header cell elements of the table, and $rows, and array containing all the data (cells) of the table. $rows is actually a multi-dimensional array, with the top level being the rows, then and the next level being the cells of the row.

Our goal is to build these arrays. In this tutorial, I will be putting together a nice little table that looks like the following:

| ❏ | First Name | Last Name
| ❏ | Indiana | Jones
| ❏ | Darth | Vader
| ❏ | Super | Man