window.on 'load', function not useable with require JS loaded file

Question

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?

• Nicholas Miller: 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
• Murtuza Zabuawala: I think your issue with define and require please look at this article stackoverflow.com/questions/9507606/…
• Murtuza Zabuawala: Your jquery is already define so when you use define again its not working
• circlesix: 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: 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?

Answer 1

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)

Answer 2

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.

• circlesix: 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?
• Slimshadddyyy: 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