Enhancement to waitPopup on APEX5

APEX 5 has a nifty nice enhancement to the use of apex.widget.waitPopup. It now returns a “remove” function you can call to remove the wait indicator.

The Details

I’ve used apex.widget.waitPopup many times. You simply call it like this:

In APEX 4.x, you would see the following animated GIF.

APEX 4.x waitPopup

APEX 4.x waitPopup

Often, you would call it before submitting the page if you had a long running step. Then when the page refreshes it would be gone. If instead you were going to remain on the page, you had to manually remove it.

Notice the use of setTimeout as sometimes, inside of a Dynamic Action, the page rendering would be frozen and you wouldn’t see the wait indicator.

To remove the overlay and the wait GIF image you would have to remove them from the DOM with the jQuery .remove();

However, now on APEX 5, apex.widget.waitPopup returns a remove() function you can call to handle this for you. I find this a much nicer and elegant approach.

This is how the new waitPopup looks in APEX5.

APEX 5 waitPopup

APEX 5 waitPopup

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm a Senior APEX Consultant with Insum Solutions, a consulting firm specialized in Oracle databases and the APEX development tool. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

12 comments on “Enhancement to waitPopup on APEX5
  1. Jim Travis says:

    Are there any differences in Apex 5.0 in how it greys out the page. It does not grey out the pages for me in 5.0.

    • This is very interesting. There’s an element with a class of apex_wait_overlay that provides the grayed out background. However, it seems that in the Universal Theme (as of APEX 5.0.1) there’s no CSS for the overlay.

      If you add the following CSS declaration to your app you should see it.

      .apex_wait_overlay {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      z-index: 1001;
      -moz-opacity: .5;
      opacity: .5;
      filter: alpha(opacity=50);
      }

      When using previous themes the CSS is already there.
      Now, I wonder if this is by design… hmmm

  2. Jim Travis says:

    Thanks.. that works! Maybe since this is an undocumented feature it’s going away?…

  3. Jochen says:

    This is documented in APEX 5.0, but the correct API name is showSpinner:
    apex.util.showSpinner

    • They are not the same thing. The spinner call doesn’t include the overlay. The overlay, added by apex.widget.waitPopup() adds an overlay so no input is possible on the page. This is not so with the spinner alone.

  4. aloof2017 says:

    when i call this function in javascript “apex.widget.waitPopup()”. for Function processing wait.but it is not remove when then function is done.Even i remove that function.
    Can you tell me how to remove or stop it within Javascript.
    Thank you.

  5. Hazel says:

    Thanks for the info. However I too am struggling to get the spinner to go awa!!

    I’m using APEX 5.0 and the pages in my application contain a number of charts that take a few seconds each to load. I want my users to know when the charts are loading, but also when they are done. Can you help at all?

  6. Bill Carlisle says:

    Hi Jorge,
    If I enter text in a form and try to navigate away, I get the warning “Changes you made may not be saved.” as I should.
    But when I select STAY so I can save my changes the page shows the spinner and does not allow anything but a reload of the page.
    I also need to kill the spinner.. any wisdom on the topic :)
    Thank you,
    Bill Carlisle

    • If I understand, you using apex.widget.waitPopup(); to trigger the spinner, but when you chose to stay on the page you have not “event” to remove it, correct?
      Hmmm, I just explored the possibility of hijacking the alert call and add a callback to remove the spinner. Unfortunately, it seems that the “This page has unsaved changes.” message is handled differently by each browser.
      So maybe you change your approach. On your submit buttons, see if apex.page.isChanged() === true then YOU ask the user if they want to save changes and then only issue the spinner if you will continue. Otherwise, I don’t have any brilliant ideas yet. Maybe post on the forums to get a collective answer?

  7. Bill Carlisle says:

    No problem, Was trying to reproduce it on APEX site and couldn’t so I just selected the “Warn on Unsaved Changes” to “No” under “Navigation” for page attributes.
    Still curious though.. so I’ll be watrching your answers.. thank you for spending all this extra time to help others! You are very appreciated.

    Happy APEXing,
    Bill Carlisle

  8. Nidheesh O says:

    Hi sir, Thank you for the stuff. If you can help me, I have another doubt that, can we install apex in one system and connect to database in another system?. I tried this using synonym (centos) , but some updations and temporary table didn’t worked. Forms having tabular form generated error and I am unable to create tabular form based on a table from system where I installed apex. I want to keep apex in one system and database in another system due to the large file size generated in apex. I use apex 5.0.3

I love comments, write me a line