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

upgrade site to latest drupal 9 version

Drupal 9 Key Features & Why Should You Upgrade Your Site

Drupal 9 with all its new key features was launched on June 3, 2020. This new upgraded version made enterprises upgrade their systems to it later to acquire complete functionality.

Read More

iso_27001

Why and How Innoraft became an ISO 27001 certified organization

ISO 27001 is basically- “ISO/IEC 27001 – Information technology — Security techniques — Information security management systems — Requirements.”

Read More

iso_9001

Why and How Innoraft became an ISO 9001 certified organization

What is ISO 9001 certification?

The ISO certification determines that an organization meets a set of prescribed standards that will help them meeting customer and other stakeholder needs

Read More

php8-part-3

PHP 8 new features and changes - Part 3

This is part 3 of the blog. Here we will continue our discussions on the other features and changes in PHP 8.

Read More