Web Page is ready when JET says it is

     When you come, then its morning

Is the web page really ready? This is the question I always have, and mostly all HTML page developers will have. This situation is specific when a JS code needs to be invoked on page load, or when the page is ready.

Its so simple to determine the page's readiness in VBCS (actually its extended JET Framework). 

JET is a web application development framework, following the MVVM pattern and has a huge UI component library. 

So, during the page load, some framework internal APIs are still interacting with (or preparing the) UI components on the page, thus keeping the page busy. And any code which needs to be triggered, when the page is ready, should wait till the framework makes the page ready.

So, how do we determine the page's ready state (or the busy state) in JET?

Very Simple. Just use the out-of-the-box convenience APIs which tells if the page is busy.

Let's have a look at the below code.

define(['ojs/ojcore'], (oj) => {

  'use strict';

  class PageModule {

    constructor() {

      $(document).ready(() => {

        console.log("Page is now ready");

      });

      let busyStates = oj.Context.getPageContext().getBusyContext().getBusyStates();

      let checkIfPageBusy = () => {

        busyStates = oj.Context.getPageContext().getBusyContext().getBusyStates();

        if (busyStates.length == 0) {          

          $("#busyMsg").fadeOut(400,()=>{

            console.log("Page is now actually ready");

            document.getElementById('busyDlg').close();

            clearInterval(pageInterval);

            /* Any other code which needs to be triggered on the page load, or when the page             is ready */

          });                    

        }

        else{

          console.log("PAGE IS BUSY ",busyStates);

        }

      };

      let pageInterval = setInterval(checkIfPageBusy, 500);      

    }

    /* Any other code which is part of the view model */

  }

  return PageModule;

});

Its pretty straightforward. 

We have jQuery way of checking the the page's readiness, and console.log a line when jQuery decides the page is ready

Then we have a function, checkIfPageBusy, which gets invoked every half a second, and that function

1. Gets the busy states of the page, as an array
2. Checks if the array is empty
• if empty, which means the page is no more busy
• Close the dialog, busyDlg. The dialog is meant to tell the user that the page is busy.
• Then execute the code which is to be triggered on the page load, or when the page is ready

Below is the console output. We can see jQuery printed Page is Ready, but the framework says, Page is Busy.

            

Now we see from the above images, the framework kept printing the log message "Page is Busy" till the array of busy states had some elements. Once the array became empty, we see the Page is ready.

Then, we have a formal, official statement from the JET framework itself, that code which is meant to be run on the page load, can now be invoked.

Please download the VBCS application from this Git Hub repo

Happy reading. Suggestions and Corrections are welcome