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?

  • 1
    Should it be attached with .once? – Kevin Dec 16 '17 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 '17 at 20:06
0

Try this

(function ($, Drupal) {
  Drupal.behaviors.foundationInit = {
    attach: function (context, settings) {
      if (document === context) {
        $(document, context).foundation();
      }
    }
  };
})(jQuery, Drupal);
  • 2
    Can you explain your code? – Adrian Cid Almaguer Aug 15 '18 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 '18 at 15:22
0

Alternately, using once:

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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