Introduction

The new DX8 themes feature Single Page Application (SPA) treatment for improved UI/UX.
Essentially, UI menus in DX 8 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 one.ones.
Only consider the potential fixes below if your JS scripts are not working as expected.

Navigation in DX 8 AJAX Themes

When using DX 8 Ajax Themes, link/button clicks and form submissions are handled asynchronously as part of SPA treatment where only the content pane would change instead of the entire page.

Joget would detect these tags and apply SPA / AJAX treatment.

• form
• input[type=submit]
• input[type=button]
• a
• button
• button[data-href]
• button[onclick]

Reference: jw-community/wflow-consoleweb/src/main/webapp/js/ajax-component.js at 8.1-RELEASE · jogetworkflow/jw-community (github.com)

Turning off SPA / AJAX Navigation

However, there are occasions where whole page navigation is required. To turn off SPA / AJAX treatment and allow the entire page to be refreshed, add attribute "class" with "off_ajax" value.

<a href="contactUs" class="no_ajax">Contact Us</a>

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.

...

<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.

Consider the following script: 

$(document).ready(function(){
	// Your code here
});

On your first page visit, since it is loading the entire page content, the code will execute normally.
However, as you navigate to other menus and pages in the app, the above code will not execute due to UI menus being loaded via AJAX, hence the entire page is not reloaded and thus not calling the document.ready event. 

This is where the "page_loaded" event comes in handy. In DX8, this custom event is fired when a UI menu has finish loading.
Your JS scripts should now look like below: 

$(document).on("page_loaded", function(){
 	// Your code here
});