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:
- attach: which is used to add an element to a page.
- 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:
Or, we can also write it as:
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:
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:
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
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.
The below code demonstrates how to use settings in javascript:
Conclusion
Drupal is one of the leading open-source CMS in the market that elevates your website's performance with optimal flexibility and security. Drupal 10 is the latest version in the market today. It offers a set of modules and themes to create customized websites. You can find more about Drupal version 10 here.
