# 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.
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.
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).
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:
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.
Now let's add some code to the custom.js file:
Let's take it in order.
Drupal Jquery Once Again
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.
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
View the discussion thread.