Race condition loading jquery through oc-lazy-load


I’m trying to load jquery and my own custom javascript in a panel based on the matrix theme. However I’m having a serious problem getting my custom script working since its dependent on jquery being loaded first, so I almost always get a “Uncaught ReferenceError: $ is not defined”. There are some rare cases where jquery gets loaded first but its completely random (race?).

This is my first line in the code where myhabpanelenvironment.js is my custom script:

 <div oc-lazy-load="['/static/matrix-theme/jquery-3.2.1.min.js','/static/matrix-theme/matrix.js','/static/matrix-theme/myhabpanelenvironment.js']"></div>

I’ve tried loading the myhabpanelenvironment.js in its own “<div oc-lazy-load” after the others but makes no difference.

Any clues on how I can solve this? :confounded:

(I’m completely useless in angularJS, jQuery is my friend and is much needed) :wink:

As a workaround I ended up with adding another .js script that loads the other .js. My eyes are bleeding but it works…I couldn’t figure out any other way :face_vomiting:

Basically this content is loaded in a .js file through oc-lazyload. It probably takes enough time to load this so that jquery is finished loading or there’s an “order” in the loading of files I don’t get in this habpanel system.


function loadjs(file) {
            var script = document.createElement("script");
            script.type = "application/javascript";
            console.log("Script loaded!");
            // Do my stuff here
            script.src = file;

The loadJS function credit goes to https://stackoverflow.com/a/40808554

There’s a special syntax you can use to load the files in sequence (by default they are loaded in parallel so you have no guarantee of the order): Sankey diagram. Help needed to execute javascript in HABPanel custom widget - note the serie: true.

1 Like

Thank you, that solved the problem! My eyes are not bleeding anymore :laughing:

1 Like