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

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

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

Custom HTML Code
<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 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
});



  • No labels