0

JS lines of code are often executed more than once. How can this ( annoying ) behaviour be blocked?

    (function ($, Drupal) {
  'use strict';

  Drupal.behaviors.recherche = {
    attach: function (context) {    

      var filters = $('.block-facets-ajax');
      filters.wrapAll('<div class="facets-wrap"></div>');
...........

what's expected:

<div class="facets-wrap">
   <div class="block-facets-ajax></div>
   <div class="block-facets-ajax></div>      
</div>

what's happening:

<div class="facets-wrap">
<div class="facets-wrap">
<div class="facets-wrap">
<div class="facets-wrap">
<div class="facets-wrap">
<div class="facets-wrap">
      <div class="facets-wrap">
           <div class="block-facets-ajax></div>
           <div class="block-facets-ajax></div>     
        </div>
</div></div></div></div></div></div>

EDIT: trying to apply the doc given in comments, unsuccesfully

Drupal.behaviors.recherche = {
    attach: function (context) {  

      var filters = $('.block-facets-ajax',context);
      filters.once('behave').each(function () {
        $(this).wrapAll('<div class="facets-wrap"></div>');
      });

EDIT2 : dependancies added to the library. It is not working as it is not entering the .each :

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {

      console.log('this is logged');
      $('.block-facets-ajax', context).once('myModuleBehavior').each(function () {
        console.log('this is not logged');
        // Apply the myModuleBehavior effect to the elements only once.
        $(this).wrap('<div class="facets-wrap"></div>');
      });

    }
  };
})(jQuery, Drupal);

EDITED 3 : if i remove context in the selector then .each is executed but instead of wrapping all elt together it 's wrapping each element individually. This is the case no matter i use wrapAll or wrap method.

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {

      $('.block-facets-ajax').once('myModuleBehavior').each(function () {
          $(this).wrap('<div class="facets-wrap"></div>');
      });

    }
  };
})(jQuery, Drupal);

what i am trying to achieve :

  <div class="facets-wrap">
       <div class="block-facets-ajax></div>    
       <div class="block-facets-ajax></div>     
   </div>

what's the outcome:

  <div class="facets-wrap">
       <div class="block-facets-ajax></div>
  </div>
   <div class="facets-wrap">
       <div class="block-facets-ajax></div>     
   </div>
3

I adjusted your code to match the one from the docs.

MYMODULE/js/myscripts.js:

(function ($, Drupal) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {

      $('.block-facets-ajax', context).once('myModuleBehavior').each(function () {
        // Apply the myModuleBehavior effect to the elements only once.
        $(this).wrapAll('<div class="facets-wrap"></div>');
      });

    }
  };
})(jQuery, Drupal);

To get that working properly you also need to require core/jquery.once for this script.

MYMODULE.libraries.yml:

myscripts:
  version: VERSION
  js:
    js/myscripts.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once
  • not entering the .each as edited !? – Matoeil Aug 29 '19 at 9:25
  • @Matoeil – .each is there. – leymannx Aug 29 '19 at 10:18
  • i am saying i have pasted your code and console.log is telling me i am not entering that function – Matoeil Aug 29 '19 at 12:19
  • @Matoeil – But outside the function console.log gets called? – leymannx Aug 29 '19 at 13:26
  • yes it is called outside of the .each – Matoeil Aug 29 '19 at 13:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.