3

I am trying to use $(window).on('load', function(){}); in file that is being pulled into my template with require JS, but no matter how i configure the JS, it will not execute.

The odd part is, this code will execute fine when placed in <script> tags in the phtml, so i know it's not an issue with the JS itself.

In my template file i have this code:

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Cms/js/tester": {}
    }
}
</script>

And i know this is calling in the correct JS file, as i have tested the console.log inside and outside the $(window).on('load', function(){});. When i hit the page, tester 1 always prints, tester 2 does not. Inside the JS file i have:

define([
    'jquery'
], function ($) {
    'use strict';
    console.log('tester 1');
    $(window).on('load', function(){
        console.log('tester 2');
    });
});

If i take this code and put it in the template file itself, it always prints:

<script>
    require([
        'jquery'
    ], function ($) {
        'use strict';
        $(window).on('load', function(){
            console.log('tester 1');
        });
    });
</script>

So the logical conclusion would be that there is an issue with require JS loading in this JS file, but how could i track this down and test to see why this is not loading correctly?

5
  • A little strange logic, not sure why you think it should works and do not think you need a window on load here. Just put your code in callback function. At this point your page has already loaded Aug 21, 2017 at 4:47
  • 1
    I think your issue with define and require please look at this article stackoverflow.com/questions/9507606/… Aug 21, 2017 at 13:58
  • Your jquery is already define so when you use define again its not working Aug 21, 2017 at 13:59
  • The final code is not what is posted here, this was just a test to get my head around the logic. The issue with there is a ajax request that is bringing in content, and if the window.load isn't there in the script, the content isn't seen by the rest of the code.
    – circlesix
    Aug 21, 2017 at 15:27
  • but more to the point of the question, why does this work in a phtml and not in a script loaded by require. I take it that it's tied to the use of define in require js?
    – circlesix
    Aug 21, 2017 at 15:28

2 Answers 2

3
+50

First of all, you have to change your mindset, writing AMD is different than old fashioned adding JS code directly to the template.

Don't wait for load event, because it's pointless in an asynchronous environment, you can't define a certain point where your code will be loaded and executed.

If you need to do an action after another asynchronous call, like a network request, you need to run your code after it finishes and there are few ways to do it:

  • invoke your function in the callback of method you are waiting for
  • dispatch an event and listen to it
  • use promises (ES6)
10

Your window is already loaded so that event is not triggered again. If you want to be sure that your require JS code gets executed when the DOM is ready, use domReady!:

define([
    'jquery',
    'domReady!' // yay!
], function ($) {
    'use strict';

    // At this point, the DOM is already ready :-)
});

It's a RequireJS plugin that ships with Magento 2.

2
  • 1
    I understand that one can use the domready! plugin to delay the execution of the script until the page is load, but my question is why does the window.load work in direct use in template files, but not when the file is pulled in with requireJS? Or better put, given that the document is already loaded when any code inside a JS doc is executed, if there is an ajax request, how can you delay other code inside the script to wait until the ajax request has completed?
    – circlesix
    Aug 21, 2017 at 21:04
  • Do I need to put jquery/ui with domReady! like below ? require([ "jquery", "jquery/ui", "Magento_Ui/js/modal/modal", "domReady!" ], function ($, domReady, modal) { 'use strict'; If not it throws exception Mar 16, 2018 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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