db 9 img
2020 30 Dec

Drupal behaviours. What are they?

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


Latest Blogs

benefits of mobile apps for business

What are the Benefits of Mobile Apps for Businesses

Mobile applications are ruling over our world, whether it is about shopping, health, entertainment or something else. We cannot imagine our single second without using mobile apps.

Read More

Healthcare mobile app development

How Healthcare Mobile Apps is Booming the Healthcare Sector

No one can deny that mobile apps have revolutionized all sectors, whether eCommerce, education, or mobile healthcare apps. There is hardly any sector untouched by the blessings of mobile apps.

Read More

Mobile UX design

Top Do's & Dont's for a Perfect Mobile User Experience Design

In any situation, the first impression is considered the last impression. The same is the case in the world of mobile applications.

Read More

Mobile app development trends

15 Effective Mobile App Development Trends That Will Boost

The mobile app development industry is continuously evolving with great speed. There is indeed tough competition in this industry.

Read More