Drupal Jquery Once

# All libraries are defined in alphabetical order. Backbone: remote: version: '1.4.0' license: name: MIT url: https://raw. One is a jQuery method, the other is a native JS method, they both do pretty much the same thing, but append accepts multiple elements. – adeneo Apr 10 '13 at 12:51 The bottom is using a library (e.g. The commonly referenced jQuery), the top is using 'native' DOM methods to append the element. But it is only suitable for drupal.org projects that bundle their own library; i.e., the module author is the creator and vendor of the library. Libraries API should be used for externally developed and distributed libraries. A simple example would be a third-party jQuery plugin. The same library can be shared by more than one module.

As compared to Drupal 6, using Drupal 7 you can no longer rely on $() as the jQuery function because it’s simply not recognized. It should be taken into account in order to ensure that there are no conflicts between JavaScript libraries that are possibly used on a site. You can face a situation when the scripts work properly during the page making or, for example, when code snippet were copied and pasted from an external source, but during the integration, troubles begin. Most likely a problem lies in use of $ as it’s no longer an alias of JQuery. If you want to avoid conflicts while including some jQuery, a good way out is wrapping the snippets in immediately invoked the anonymous function that will alias the jQuery namespace to $ as it is illustrated in the following example:

JavaScript codes running on page load should be also wrapped in a function passed as argument to jQuery or jQuery(document).ready. It makes it possible for everything inside to load as soon as the DOM (Document Object Model) is loaded and before the page contents are loaded:

When these two patterns are combined, everything goes fine. Still, if content is added to the page after page load the added elements will never be processed. Similarly, if the content is partially removed, the code, for instance, will not be able to update information about the already processed elements. But in Drupal there’s an API used for such purposes and it is called behavior.

Drupal Behaviors constitute the object in JavaScript that Drupal can initialize after page load, and after every AJAX call in DOM and the latter is a huge advantage of behaviors. They enable us to facilitate the workflow and make integration of JavaScript in Drupal projects easier. Though behavior is not obligatory, it’s highly preferable in order to avoid future possible problems like the issues when code written some time ago starts behaving strangely when a contrib module is added to the project. It’s written in the following way:

Note that when behavior should be added to elements the attach function of all registered behaviors will be invoked. It occurs both when the DOM is ready (page load) and when elements are added to the DOM. Alongside attach there’s the detach function, which can be used to detach registered behaviors from page elements. It can happen before the elements are moved or removed from the DOM or a form is submitted. As for the context parameter, it’s a parent of the added elements. The settings parameters in their turn are the settings for the context, as a rule, the Drupal.settings object as set by calls to drupal_add_js() from PHP. Besides context and settings, the detach function also expects a trigger. It’s essentially a string containing the causing of the behavior to be detached. Possible causings can be the following:

  • unload (the context element is being removed from the DOM);
  • move (the element is about to be moved within the DOM);
  • serialize (when an Ajax form is submitted, this is called with the form as the context).

The attach and detach functions of a behavior can be used multiple times. Your JavaScript is executing well from the first sight, but sometimes the same element is processed two times or more. But Drupal 7 fix this issue with jQuery ‘Once’ plugin integrated into Drupal 7 core to add a simple class to the HTML element to ensure that the behavior is only processed one time:

Since a behavior is being attached and detached to and from a context, the context object can be used to restrict your jQuery queries to only the affected element or DOM subtree, like here:


Taking into account everything mentioned earlier, it follows that the base pattern to process elements on page load will look like this:


To get started, let's get back to how to include custom javascript files to our theme. In the .libraries.yml file, you need to include js:

It is important to follow the indentation so that it is in two spaces. So, we have included the js/custom.js file. But this is not enough for jQuery to work for us. The fact is that the Drupal core does not require jQuery and jQuery does not include. It must be included separately:

We will also use jQuery.once(), this is a separate plugin for jQuery, in order to attach events and methods to the selector only once.

The fact is that we will write javascript code that will be called by Drupal several times for different events. Therefore, we will need this .once() method.

Now let's add some code to the custom.js file:

Drupal Jquery Once

Let's take it in order.

Drupal Jquery Once Again

We wrap jQuery code in this construct because jQuery in Drupal runs in .noConflict () mode. This is necessary in order to use the dollar sign $, and this did not conflict with other javascript frameworks Prototype, MooTools. It is unlikely that you will have to meet with these frameworks; jQuery has tightly taken a leading position. But you will have to wrap all jQuery code in this construct.

So we come to the behavior. If you write jQuery code in Drupal, you need to first wrap it in function ($), and secondly in behavior. The behavior name must be unique, in our example myModuleBehavior, but you need to write a name for each behavior:

Use camelCase to name the behavior. Behavior is called when the page loads, for every AJAX request. Thus, when new content is uploaded to the site and embedded in the structure of the existing site, the code from behavior is called, each time. This is significantly different from:

which is called only once upon loading the page.

Drupal Jquery Once

If you started using behaviors and noticed that you have strange events with the site, for example, through jQuery, a block is added several times:

For each ajax request, you will add another Test paragraph. Therefore, you need to add the .once() function:

Another feature of behavior is the context variable. Each time new content is added to the site when the page is loaded or through ajax, then all new content is in the context variable. Thus, we do not need to go through the entire DOM tree, after each ajax request, to attach the event to the selector. Just context is enough:

Now the paragraph is written in the correct Drupal style. Of course, you can use the old entry with document.ready (), but then it will only work once and slower than through behavior.

Drupal Jquery Once Upon A Chef

If you have any questions about jQuery/javascript or suggestions for additional theme, write in the comments.

View the discussion thread.