I'm experimenting with BigPipe on D8 and it seems that the regular jQuery $(document).ready() function fires before the BigPipe has finished loading all the elements causing quite a few difficulties.

For instance I have buttons with activation trigger element ID's which are loaded into a variable, but the trigger elements don't seem to get loaded by the time JS runs and they aren't present yet,breaking the functionality.

Is there a simpler workaround than rewriting all the JS libraries I'm using, that rely on the ready() function? Maybe something BigPipe specific solution I haven't found yet?

  • Where is this broken javascript? Is it written in a closure so to play nice with Drupal?
    – Kevin
    Sep 12, 2016 at 13:14
  • @Kevin: Yes they're written in closures, and there are quite a few libraries I'm using, which could be affected by javascript running before all HTML elements are there. The current situation is a code that checks for all anchors with a certain class.. for each anchor has a "data-activates" attribute, which contains an ID of a normally hidden element to display on click.The thing is, that the button itself already seems to exist by the time JS is run, but the element to be displayed doesn't, so the variable var activates = $("#"+ origin.attr('data-activates')); has nothing associated to it Sep 12, 2016 at 14:52
  • 1
    Instead of everyone down voting this question, I'd appreciate feedback on how to make the question better in your eyes.. Sep 13, 2016 at 7:36
  • I've upvoted the question. I think this is a real problem and very well researched, both the question and the answer from @marco
    – 4uk4
    Sep 13, 2016 at 11:22

1 Answer 1


You must not ever rely on document.ready when you write js for drupal. You should use drupal behaviours; If used properly this will ensure that your code runs both on normal page loads and when data is loaded by AJAX (or BigPipe!)

Also read this interesting post on drupal issue queue JS relying on document.ready event does not work with BigPipe

  • in this case, what is the appropriate approach to using external libraries that are written with document.ready, as most of the ones I have are? If I were to rewrite every library to use the drupal behaviors, wouldn't that make maintaining and updating them a nightmare? Sep 13, 2016 at 7:31
  • Good find on the issue link! Sep 13, 2016 at 7:38

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.