Tutorial

[FIX] BigPipe messing with your Javascript? Easy fix

In Drupal 8, BigPipe was introduced as an ajax renderer for our pages. While its presence is nice and good and it is making our pages super fast, it is messing with development easily. For me, it was messing with my Jquery in front-end. Sometimes it run nicely, and sometimes it refused to run. It took me a solid whole to realise that the BigPipe was the cause of all the struggle. Because it renders the page sooner with HTML placeholders and replace them with normal blocks via AJAX, document.ready was run before the blocks were actually present on the website.

So classic document.ready in jquery, or window.load does not work, what does then?

Pridal/a lubo dňa Ne, 07/19/2020 - 02:42
The workaround

You should avoid writing code in window.load or document.ready function when writing javascript in Drupal 8. I stumbled across this issue thread on Drupal.org and it works like a charm!

Example code

This code should run only once, just place it in your theme javascript file and you should be fine.

var checkReadyState = setInterval(() => {
  if (document.readyState === "complete") {
    clearInterval(checkReadyState);
    console.log('Page is loaded.');
    /* Put your code logic here */
    (function ($){
     /* Put jQuery code logic here */
    })(jQuery);
  }
}, 100);
Fixed!

Now you should be ready to go. Rock some Drupal 8 then!

Might interest you

Tutorial
Struggling with setting up HTTPS for Drupal 8? Just copy paste the following code to .htaccess file located in your root directory and you…
Module
Simple module which adds payment method "Bankovým prevodom" (bank transfer). It generates variable symbol as well for further use in mails…

Recommended

Tutorial
1 views
While working on a fairly complex website with very complex views setup, including tens…
Tutorial
6 views
In this case we have two options, either we use hook_user_presave() or we can create new…
Tutorial
4 views
When using Swiftmailer under Drupal 8 / 9 it automatically sets the headers for sender to…
Tutorial
3 views
Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging…
Tutorial
10 views
There is a very handy function in Drupal 8 / 9, allowing developers refresh view when…