For example I have a solution with three files in module:
Loader.html:
<div id="exampleDiv" style="background-color: yellowgreen">click here..</div>
<script type="text/javascript" language="javascript" src="../Style%20Library/TestSpSOD/jquery-3.1.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../Style%20Library/TestSpSOD/consoleHello.js"></script>
jQuery and my javascript file, addClickEvent.js:
"use strict";
function addClickEvent() {
jQuery("#exampleDiv").on("click", function () { (alert("Hello!")) });
}
// if scripts are loaded from hardcoded root site collection
_spBodyOnLoadFunctionNames.push("addClickEvent");
I refer this script in CEWP on root site collection like
/sites/SiteColection/Style Library/TestSpSOD/Loader.html
and all this works.
But it will not work on subsites, I need to write something like "src="../../../Style%20Library/TestSpSOD/consoleHello.js" and change the path every time
I want to load jQuery.js and my javascript file dynamically:
<div id="exampleDiv" style="background-color: yellowgreen">click here..</div>
<script type="text/javascript" language="javascript">
function moduleLoader() {
var url = _spPageContextInfo.webServerRelativeUrl + "/Style%20Library/TestSpSOD/";
var jqueryScript = document.createElement('script');
jqueryScript.src = url + "jquery-3.1.1.min.js";
jqueryScript.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(jqueryScript);
var myScript = document.createElement('script');
myScript.src = url + "consoleHello.js";
myScript.type = "text/javascript";
document.getElementsByTagName('head')[0].appendChild(myScript);
}
// if scripts are loaded dynamically
//
SP.SOD.executeOrDelayUntilScriptLoaded(moduleLoader, 'sp.js');
//
</script>
But than my _spBodyOnLoadFunctionNames.push("addClickEvent"); does not work. Also if I check this code in FF it sometimes says "jQuery not defined", and sometimes doesn't say it. Also tried to do something like
// if scripts are loaded dynamically
SP.SOD.executeOrDelayUntilScriptLoaded(moduleLoader, 'sp.js');
SP.SOD.executeOrDelayUntilScriptLoaded(addClickEvent, 'sp.js');
but it does not work.
How to load these scripts correctly?
upd.: Thank You all guys for answers! All of them are very interesting! I used method that Cecilia reccomended (added loading html and css):
<script type="text/javascript" language="javascript">
var url = _spPageContextInfo.siteAbsoluteUrl + "/Style%20Library/TestSpSOD/";
// add html markup
document.write("<div id='exampleDiv'>");
document.write("click here..");
document.write("<\/div>");
// add css
document.write("<link rel='stylesheet' type='text\/css' href='" + url + "" + "\/styles\/stylesheet.css'><\/script>");
// add js
document.write("<script src='" + url + "jquery-3.1.1.min.js'><\/script>");
document.write("<script src='" + url + "addClickEvent.js'><\/script>");
ExecuteOrDelayUntilScriptLoaded(function () {
addClickEvent();
}, "sp.js");
</script>
It works on root and on subwebs on my dev and test and in the cloud (Mohamed Derhalli commented that using will break MDS if it's used). Now I don't need to change code every time
document.getElementsByTagName('head')[0]
is 'I don't know Jack about the DOM' code fordocument.head
... it was needed in IE8 because Microsoft is always late with implementing standards