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
}
Reference:
https://www.educative.io/answers/how-to-dynamically-load-a-js-file-in-javascript
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>
Using page_loaded event to simulate a page refresh
Since DX 8 Themes have the Single Page Application (SPA) treatment, some scripts that depends and load on page opened / refresh might not work as intended.
consider the following script, where it is used to capture the current URL that the page is on :
$(document).ready(function(){
var currentUrl = window.location.href;
console.log("URL : "+currentUrl);
});
On your first page visit, the console will output the intended output, which is the url of the current page that you are in.
however, as you navigate to other menus and pages in the app, the above code will not fire due to the SPA treatment and the page does not get refreshed.
This is where the event "page_loaded" comes in handy. you can simulate a page refresh and modify the above code to behave as if the page is reloaded like so :
$(document).ready(function(){
$(document).on("page_loaded", function(){
var currentUrl = window.location.href;
console.log("URL : "+currentUrl);
})
});