Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
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.
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
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>