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 Consider the following script, where it is used to capture the current URL that the page is on : 

$(document).ready(function(){
	var// currentUrlYour = window.location.href;
	console.log("URL : "+currentUrl);
code here
});

On your first page visit, the console will output the intended output, which is the url of the current page that you are in.howeversince 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 fire execute due to the SPA treatment and the page does not get refreshedUI menus being loaded via AJAX, hence the entire page is not reloaded and thus not calling the document.ready event. 

This is where the event "page_loaded" event comes in handy. you can simulate a page refresh and modify the above code to behave as if the page is reloaded like so In DX8, this custom event is fired when a UI menu has finish loading.
Your JS scripts should now look like below: 

$(document).ready(function(){
    $(document).on("page_loaded", function(){
    	var// currentUrlYour = window.location.href;
    	console.log("URL : "+currentUrl); 
    })
});code here
});