Page content

Calling a function after an #AJAX event (Drupal 7)

When working with Drupal 7's Form API, I often need to call a JavaScript function after the #AJAX event has fired. This was quite difficult in Drupal 6, but Drupal 7 offers a nice mechanism to do so. In this tutorial, we will be going over a basic example on how to create a JavaScript function that is fired after an #AJAX function has completed. To do so, we will be looking at Drupal's Ajax Commands, and how we can use the system provided callbacks, as well as define our own custom callbacks, to enhance our Drupal forms.

Drupal 7: Ajax driven multi-step forms with a non-javascript fallback

As any Drupal developer has learned soon enough, Drupal's Form API is extremely powerful, but with that power come complexity. Building a complex Drupal form to look and behave the way you want is almost an art form in and of itself. This tutorial will discuss how to build a multi-step, #ajax driven Drupal 7 form with a non-JavaScript fallback.

Drupal Simpletest: Debugging hanging tests

Here at Jaypan, we use Drupal's Simpletest to create unit tests, both to ensure that our code has no bugs when we build it, and to ensure that any code added in the future doesn't break old code.

The problem with Simpletest is that if there is an error in your testing code, or anywhere else, the tests hangs, and seems to go on forever. This makes for difficult debugging, when you have no indication as to whether or not there is even a problem, much less what it is.

Drupal 7 View Modes: Consistently themeing content across your site

Introduction: What's a 'view mode', and why do I care?

Here at Jaypan, we have begun using a powerful new feature in Drupal 7, 'view modes', to ensure consistent presentation of data across the site. View modes actually existed in Drupal 6, however there were only two available modes, full and teaser (more on this later). And since Drupal 6 only had one Entity type, Node, these view modes only related to nodes, as there was nothing else to relate to. Drupal 7 came along and opened up an API for other modules to register Entity types other than Node. Many things have been turned into Entities as a result; Taxonomy, User, and Comment are all entities in D7, and at Jaypan we utilize custom Entity types for each project. This means that the same types of things can be done with these Entities, as used to be done with nodes. For example, taxonomy terms have image fields attached to them in D7.

Cross-browser image masking using javascript, VML and the HTLM5 canvas element

On the top page of the rebuild of is a slideshow that splits images diagonally, and moves them off screen. In actuality, the images themselves are not split, rather I have layered two of the same image over top of each other, with the right side of the left image being transparent, and the left side of the right image being transparent. Then, when these two images are animated outwards, it appears that the image is split.

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:

  1. var i, img;
  2. for(i = 0; i < imagePaths.length; i++)
  3. {
  4. img = new Image();
  5. img.onload = function()
  6. {
  7. someFunction(i);
  8. };
  9. img.src = imagePaths[i];
  10. }