Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal behaviours. What are they?

Parent Feed: 

Drupal behaviors is a more modular and customizable strategy to implement JQuery.ready. Ok, this statement does not completely explain it. Let us get deeper into this by asking the right questions. The what? The why? The when?

Before diving straight into Drupal behaviors let us first understand how does the existing JQuery.ready work. When the DOM (Document Object Model) is ready for manipulation JQuery.ready starts digging with a shovel and modifies the elements in that particular page. But there is a catch here. When JQuery.ready starts digging with a shovel it does so only once and cannot modify a new element, which might have appeared suddenly out of nowhere, underneath what it has already dug. Modifying the new element would mean starting to dig yet again from the very beginning. Hence, speaking in plain terms JQuery.ready can run only once when the DOM is loaded.

Enter Drupal.behaviors, which is like a machine that instead of digging every time from the very beginning, can dig from wherever required. Even if, a new element suddenly appears underneath the earth, it can dig into that particular area and modify it. In programming terminology, this means that Drupal.behaviors can be run multiple times during page execution. Moreover, they can be run whenever a new element gets introduced into the document (i.e. during AJAX content loading). So, the advantage of Drupal behaviors over the document.ready() is that they are automatically re-applied to any content which is loaded through AJAX.

Drupal 7 provides us with two handles:

  1. attach: which is used to add an element to a page.
  2. detach: which is used to remove an element from a page.

Drupal.behaviors can also override or even extend an existing behavior. Supposedly, if a module has a behavior where hovering on an image adds a transition effect, another module could replace that behavior with a different transition effect.

Another advantage of Drupal.behaviors is that we can pass drupal_add_js (PHP) as the first parameter for being the context or Drupal.settings.modulename (JS) as the second parameter to the behavior.

When we pass the context variable as the second parameter to the JQuery selector only that context is searched for and not the entire document. This is considered as a good practice.

How to use Drupal behaviors?

This is what we would normally do:

db 1 img

Or, we can also write it as:

db 2 img

The above is a valid code and we can actually use it but, there’s a catch!

The above code will run only once but what if our content gets loaded through AJAX and we wanted to add a class to all span tags? Then we would have to do something like this:

db 3 img

The above code will work for the content that’s loaded initially but won’t get added to the new elements that get added on AJAX call. This is where we would have to use Drupal behaviors. Behaviors will get executed on every request including those that are AJAX. Hence, the above code can be written like this:

db 4 img

Now, let’s see what the different aspects of the code are:

ElementNew: This is the namespace. It should be unique. It can be the module name but that is not mandatory. This is what identifies the Drupal behavior as a unique one.

attach: This contains the actual function that should be executed

context: When the page gets loaded for the first time, the context will contain the entire document but after an AJAX request it will hold all the new loaded elements. Span, in this case. With this, we can address the required element itself on AJAX requests without having to consider the entire document which gets loaded initially.


settings: This contains information passed on to Javascript via PHP, it is similar to accessing it via Drupal.settings.

How to use settings in Drupal behaviors

Supposedly, for some reason we want to hide all the span tags that contain a class called ‘img-span’ from our page with a delay of 10 sec

db 6 img

Through the above code, the span with class ‘img-span’ will disappear after 10 seconds,  as we hard coded the duration (10000 ms = 10 sec). Now let’s see how to pass this duration using settings.

Now if we want the duration to be passed to javascript which later can be used to hide the class under different circumstances, we can use Drupal.settings.

Using drupal_add_js we can pass duration as settings.

db 7 img

The below code demonstrates how to use settings in javascript:

db 8 img

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web