Page content

High Performance JavaScript using Drupal 7's JavaScript API


In today's web, JavaScript is an essential component of any nice, easy to use website. However, while the basics of JavaScript can be easy to learn, it can be hard to know whether the scripts you are writing are heavy, causing page lag, and making for longer load times.

Drupal comes with an excellent JavaScript API, allowing for the creation of high-performance applications, but it can be confusing to know exactly how to effectively use the API.

Advanced AJAX enabled multi-step forms: creating and altering Drupal entities in custom forms (aka: Wizard forms)


Sometimes we need to create custom Drupal forms to create or update Drupal Entities, in a different manner than the default forms that we are provided with. In this tutorial, we will look at creating a form 'wizard', that allows a user to create or edit two nodes in a single form.

Example overview

Throughout the world, many companies have multiple branches of their company. The form we will create in this tutorial will create a company, and then a branch that is assigned to that company. This will be done using a multistep form with the following steps:

Drupal 7 - change keyboard types for mobile devices


With HTML5 comes new <input/> types, which allow for different keyboards on mobile, improving the mobile user experience. However, Drupal by default does not allow for the changing of <input/> types to these new HTML5 types. This tutorial will show how to set up your system to allow for custom input types to be set on any text element.

This tutorial will cover two main steps:

Creating a multiple Node (Entity) edit form in Drupal 7, with filters, a pager, and sortable columns

This tutorial describes how to create a form containing a list of Nodes in an HTML table, with a pager and sortable columns, allowing for multiple nodes to be edited on a single page. The form also contains a search area, allowing for the filtering of the nodes shown by user submitted values.

Preventing emails from being sent from a Drupal 7 development environment


Once a site has gone live, it's important to not send emails (and do other things like pushing to Twitter/Facebook) from development environments. These actions should only happen from the production server. This tutorial describes how to set up your code to ensure that you are only sending emails etc. from the production environment.

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.