...
Loading Javascript Libraries
Instead of using the followingIf your Javascript code requires external libraries to be loaded first, then using the "document.ready" event is not reliable.
| Code Block |
|---|
| language | xml |
|---|
| linenumbers | true |
|---|
|
<script src="#appResource.someJSLibrary.js#">
<script>
$(function(){
//continue with usual code execution
});
</script> |
Please useconsider using the following code to load the external libraries then only continue with code execution in the method named "windowReady".
| Code Block |
|---|
| language | xml |
|---|
| linenumbers | true |
|---|
|
<script>
loadJSCount = 0; loadJSCountCompleted = 0;
function loadJS(FILE_URL, async = true) {
loadJSCount += 1;
let scriptEle = document.createElement("script");
scriptEle.setAttribute("src", FILE_URL);
scriptEle.setAttribute("type", "text/javascript");
scriptEle.setAttribute("async", async);
document.body.appendChild(scriptEle);
// success event
scriptEle.addEventListener("load", () => {
console.log("File loaded");
loadJSCountProcessed+= 1;
if(loadJSCount == loadJSCountProcessed){
windowReady();
}
});
// error event
scriptEle.addEventListener("error", (ev) => {
console.log("Error on loading file", ev);
loadJSCountProcessed+= 1;
if(loadJSCount == loadJSCountProcessed){
windowReady();
}
});
}
loadJS("#appResource.someJSLibrary.js#", true);
//this acts as the replacement for windows.ready
function windowReady(){
//continue with usual code execution
} |
...
| Code Block |
|---|
| language | xml |
|---|
| linenumbers | true |
|---|
|
<script type="text/javascript">
$(document).ready(function () {
$("#resend").off("click");
$("#resend").on("click", function (event) {
console.log('enter resend');
FormUtil.getField("status").val("resendOTP");
$("#assignmentComplete").focus().click();
return false;
});
$("#changeTo").off("click");
$("#changeTo").on("click", function (event) {
console.log('enter changeConfirm');
FormUtil.getField("status").val("changeConfirm");
$("#assignmentComplete").focus().click();
return false;
});
});
</script> |