3

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 '16 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 – Alari Truuts Sep 12 '16 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.. – Alari Truuts Sep 13 '16 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 – 4k4 Sep 13 '16 at 11:22
5

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

| improve this answer | |
  • 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? – Alari Truuts Sep 13 '16 at 7:31
  • Good find on the issue link! – Alari Truuts Sep 13 '16 at 7:38

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.