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:
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
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.
loadjs('/static/matrix-theme/habpanelenvloader.js');
function loadjs(file) {
var script = document.createElement("script");
script.type = "application/javascript";
script.onload=function(){
console.log("Script loaded!");
// Do my stuff here
script.src = file;
document.body.appendChild(script);
}