Drupal Alters and Overrides: Drupal.theme.prototype


Drupal.theme.prototype was introduced in Drupal 6, meant for modules producing HTML content within JavaScript, allowing that this content to be overridden.

As a real world example, the Node relationships module produces a link via jQuery that, on mouse over, pops up the words Search and reference.... Each dynamically generated link has it's alt tags created in this way.

To change this link without modifying the module directly, you can override the text in your own theme's template.php file.

The original code in Node relationship's node_form.js file contains:

// Install the "Search and reference" button.
    if (fieldOptions.searchUrl) {
      var $searchButton = $(Drupal.theme('nodeRelationshipsReferenceButton', 'search', Drupal.t('Search and reference...')));

Notice Drupal.theme namespace above. What Drupal.theme is doing is passing a few parameters; the first, nodeRelationshipsReferenceButton, is the name of our actual theme function which contains:

* Theme the specified button for an autocomplete widget.
Drupal.theme.prototype.nodeRelationshipsReferenceButton = function(type, title) {
  return '';

The other parameters being passed are type and title.

In your theme's template.php file, you could use the code below to change the text to Search.

Drupal.theme.nodeRelationshipsReferenceButton = function(type, title) {
  if (type == 'search') {
    title = 'Search';
  return '';

The only real difference between these functions is the removal of the prototype namespace.

jQuery Tabs: Creating "Continue" and "Previous" Buttons


jQuery is neat, and so is the jQuery tabs plugin. This is a method I used to add "continue" and "previous" buttons to some jQuery tabs, essentially giving it a "wizard-like" look and feel. While I am also using a version of the JS Tools tabs module for Drupal, this should hopefully work for the stand-alone plugin, too.

Despite the tabs being assigned anchor IDs, simply trying to skip to the next one only seems to work in Firefox. Let's break this down and say I have a page with 3 tabs. The tabs are named #section-1, #section-2, and #section-3.

In #section-1, I want a "Continue" button going to #section-2. This is the code I add directly to my tabs page at the bottom of #section-1.

I also added some similar links on #section-2 for a previous AND continue button, like so:

Now I need to add some stuff to the tabs javascript file (in my case, tabs.js).

$function() {

Continue<\/a><\/p>').prependTo('#first-continue').find('a').click( function() { $('#container').triggerTab(2); return false; }); $('

Continue<\/a><\/p>').prependTo('#second-continue').find('a').click(function() { $('#container').triggerTab(3); return false; }); $('

Previous<\/a><\/p>').prependTo('#first-previous').find('a').click(function() { $('#container').triggerTab(1); return false; }); });

Note that container is the main ID of the whole tabs structure. These names are similar to what you'll find at the jQuery tutorial. If you're using the Drupal JS Tools tabs module, you may need to change this to .drupal-tabs.

That's it. Tested in IE6, IE7, Safari3, and Firefox. You can style the look of them to appear more like buttons using the continue class with CSS.

Subscribe to RSS - javascript