Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

The new DX8 themes feature Single Page Application (SPA) treatment for improved UI/UX.
Essentially, UI menus in DX8 AJAX Themes are loaded asynchronously instead of loading the entire page content, thus reducing unnecessary loading of resources such as UI sidebar elements that do not generally change.

There are certain considerations when we are upgrading from the older Joget DX 7 based theme to the new oneones.
Only consider the potential fixes below if your JS scripts are not working as expected.

Loading Javascript Libraries

If your Javascript code requires external libraries to be loaded first, then using the "document.ready" event is not reliable.

...

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.

...

Code Block
languagexml
linenumberstrue
<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 attach functions on page load/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.

...