7

I have problem with drupal behaviors and context in combination with big pipe. It seems like context variable sometimes contains same part of page. I have tried:

(function ($, Drupal) {
  Drupal.behaviors.myCustomBehavior = {
    attach: function (context, settings) {
      console.log(context);
    }
  };
})(jQuery, Drupal);

When I load page and watch browser console contexts there is div with main menu block but there is also whole #document element which contain menu block also (see screen).

context in browser console

This behaviour is for me real problem because I use zurb foundation and I have to initialize all components and I do it:

(function ($, Drupal) {
  Drupal.behaviors.myCustomBehavior = {
    attach: function (context, settings) {
      $(context).foundation();
    }
  };
})(jQuery, Drupal);

I think this is correct way how to initialize foundation for all elements and it should be compatible with big pipe. But if I get same html part in context twice (some sub elements in context are same) I initialize some zurb foundation plugin twice (see next image).

plugin inited multiple times

This breaks zurb foundation plugins. I'm not sure what to do. I read lot of Drupal documentation about js, behaviours and big pipe and according to documentation there should not be problem.

When I disable big pipe everything works as expected but that's not solution.

Do anybody knows what am I doing wrong?

3
  • 1
    Should it be attached with .once?
    – Kevin
    Dec 16, 2017 at 19:48
  • I tried it but result was same. I think that once doesn't solve it because two contexts would still contain same elements so even if it would be called once for each context it would be still fired twice for same elements.
    – marysmech
    Dec 16, 2017 at 20:06
  • 2
    You need to use $.once(). "two contexts would still contain same elements so even if it would be called once for each context it would be still fired twice for same elements" <- This is incorrect. The point of $.once() is that it only fires once, even when (and because) the same HTML elements may be part of the context more than one time.
    – Jaypan
    May 20, 2020 at 14:20

2 Answers 2

1

Alternately, using once:

(function ($, Drupal) {
  Drupal.behaviors.foundationInit = {
    attach: function (context, settings) {
      $(body, context).once('foundation-init').each(function() {
        $(document).foundation();
      });
    }
  };
})(jQuery, Drupal);
-1

Try this

(function ($, Drupal) {
  Drupal.behaviors.foundationInit = {
    attach: function (context, settings) {
      if (document === context) {
        $(document, context).foundation();
      }
    }
  };
})(jQuery, Drupal);
2
  • 3
    Can you explain your code? Aug 15, 2018 at 15:06
  • 1
    You might want to add some extra description here to answer the question, Do anybody knows what am I doing wrong? (e.g what is if (document === ... doing that solves the problem)
    – Shawn Conn
    Aug 15, 2018 at 15:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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