Reuse and Show Apex's Wait Popup

Oracle Apex supports or offers a GIF image and an overlay while loading content using Dynamic Action/AJAX. While creating a dynamic action you have an option to select "Show Processing" for supported actions.

This shows a nice overlay over the screen and a GIF image out of the box. You may have scenarios to show a loading while doing some javascript/jquery actions on your own.

Will it not be nice to show/reuse the same overlay and image?

This article explains how to do it.

Say you have a function to load data from server and show on page using a javascript function:

function previewFiles(){
  ajax.widget.waitPopup();
}

The above javascript call will show the overlay and GIF image. This is very simple isn't it. But to hide it, there is no function. We have to call following jquery method calls.

$("#apex_wait_popup").remove();  
$("#apex_wait_overlay").remove();

Which will remove the popup and overlay from DOM. To simplify things we will create this as a javascript function and save in one's library.

function hideWaitPopup(){
  $("#apex_wait_popup").remove();  
  $("#apex_wait_overlay").remove();
}

Then simply call hideWaitPopup(); inside your javascript function to hide the popup and overlay.