Introduction
The new DX8 themes feature Single Page Application (SPA) treatment for improved UI/UX. There are certain considerations when we are upgrading from the older Joget DX 7 based theme to the new one.
Loading Javascript Libraries
If your Javascript code requires external libraries to be loaded first, then using the "document.ready" event is not reliable.
<script src="#appResource.someJSLibrary.js#">
<script>
$(function(){
//continue with usual code execution
});
</script>
Please consider using the following code to load the external libraries then only continue with code execution in the method named "windowReady".
<script>
loadJSCount = 0; loadJSCountProcessed = 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
}
Custom Links and Buttons
If you have any custom html with <a> or <button> or <input> with button html tag, the AJAX Based DX 8 Themes would bind click event to intercept them, this is part of Single Page Application (SPA) treatment.
<a href="inbox">See My Inbox</a> <button>Do Something</button> <input id="resend" name="resend" class="form-button btn button" type="button" value="Send Me OTP">
If you do not want this behavior, you will need to unbind the click event. For example, please consider the code below.
<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>