[Resolved] Error: Unable to get value of the property 'showWaitScreenWithNoClose': object is null or undefined

Today, I will try to use the API with a wide library JS in SharePoint 2013. If you are familiar to JS and SharePoint Client Object Model, you will know how to call a method or execute a query using SharePoint API. However, to work with SharePoint 2013 smoothly, you must research what the SharePoint did!

In some js library, SharePoint had supported a debug file to help you learn to be acquainted with approaching API client library. And I have resolved a great of issues based on that.

My use case is: when I click on a post-back button, after the back-end processed and return the data, the page is reload and I don't want to submit as a post-back re-rendering all view state. The code looks like:

<asp:Button runat="server" Text="Process..." OnClientClick="Update()" OnClick="btn_ProcessClick"></asp:Button>

and the Js code is:

function Update() {
        var dialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Waiting!", "Processing...");
}

I did not implement any remaining functions, just need to test a window dialog to ensure the dialog works fine. But the result is:

Error: Unable to get value of the property 'showWaitScreenWithNoClose': object is null or undefined

My though is all client scripts are loaded and SharePoint did by using the default master page. And that's true! However, to initialize the object or class we must ensure the script loaded into page before using. To fix this issue, the code was changed:

var fn = function() {
        var dlg = SP.UI.ModalDialog.showWaitScreenWithNoClose("Waiting!", "Processing...");
};
var defd;

try {
     defd = typeof SP.UI.ModalDialog.showWaitScreenWithNoClose;
}
 catch (e) {
        defd = "undefined";
}
EnsureScript("SP.UI.Dialog.js", defd, fn);

And the result is:

Conclusion: To work with API client SharePoint object model, we must ensure the scripts loaded!