0

It may just my limited js experience but until recently I had some js attached to the drupal context on one of my sites to produce some small animation/style effects that took the form:

$(window).on("load",function() {
    //do something
})

This worked great until recently then suddenly stopped working with no errors or messages. Eventually I got it working by changing the above to:

$(document).ready(function() {
    //do something
})

Did something change in core or jquery that caused this? Why would there be no errors? I use the first $(window).on() successfully on at least two other sites but have not been able to figure out why it stopped working on this one.

Some of the js I wish to run relies on the entire page being fully loaded so I really would rather use $(window).on()- which I believe triggers later.

I am using the latest release version of drupal 8

  • 2
    Drupal 8.4 introduced jQuery 3.x - which may be why things "stopped working" if they previously worked before as there are breaking changes. – Kevin Nov 8 '17 at 15:38
2

As @Kevin mentioned

Drupal 8.4 introduced jQuery 3.x

And according to jQuery Core 3.0 Upgrade Guide the "ready" event has been removed.

What you should do is to implement your functional code in Drupal.behaviours. This would have the similar effect as $(document).ready() but with more benefits.

(function ($, Drupal) {

  Drupal.behaviors.myHandler = {
    attach: function (context, settings) {
      // do something
    }
  };

})(jQuery, Drupal);
  • So sorry If I wasn't clear about this in my question but my code is already wrapped in a drupal behaviour/context. I've always thought I had to call window.on("load") events inside that context. That has - and continues - to work on my other sites just on this site the window.on('load') event is not triggering inside the Drupal.behaviour – tanbog Nov 8 '17 at 22:34
1

After reviewing @hugronaphor's answer. In particular this link along with some jQuery 3.x discussions regarding changes to the ready and load events my final solution was in fact to remove my code from Drupal.behaviours.

In the end I have implemented code in the following style:

(function ($, Drupal){
    $(window).on("load",function() {
        //Do something
    });
})(jQuery, Drupal);

This gave me reliable access to the .on("load") event again which is what I was after as I need the entire page to be loaded before I trigger the script.

As my script is relatively simple and doesn't need further context information I think this is fine for my use case.

I "think" the issue is related to the following change in jQuery 3.x where on("load") is not guaranteed to fire inside a $(Document).ready state any more - which is what Drupal.behaviours is giving you. I am something of a js noob though so will leave it to smarter people to explain why this may or may not be the case. If there is a better answer I would like to hear it.

For my simple case not being in the Drupal.behaviour has solved my issue.

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.