Skip to Main Content

Refresh when closing Modal Dialogs

When closing Modal Dialogs, you may want to refresh the calling page (or objects on that page) underneath it.
This can be done easily enough, but there are a few potential issues you may run into:
  • The standard Dynamic Action event "Dialog Closed" does not run when the user clicks the 'X' in the upper right corner, or presses Escape. This can be fixed by using the jQuery UI dialogclose event.
  • If the calling page itself is a Modal Dialog, that page will "miss" the event because the event is only raised on the original calling page.
    For example: you have Page 1, which opens Modal Dialog 2, which opens Modal Dialog 3. Now if you close Modal Dialog 3, you may want to refresh Modal Dialog 2, but the event is only run on Page 1. And that "stack of Modal Dialogs" may be a lot longer than just 3.
The Dynamic Action listed in the Code below fixes both these issues.
It uses the jQuery UI dialogclose event, and it loops through the entire stack of Modal Dialogs (which are frames really) and the underlying Page, and refreshes the Modal Dialog or Page directly underneath the one that was just closed.

A few sources related to this topic I found useful:


If your modal dialog behaves like this:
then you have probably forced the dialog to have a specific height and/or width, and are using a Chromium-based browser like Edge or Chrome.
Also, probably you only see this when zooming out in your browser - this particular example only showed itself at 50%, other zoom levels looked OK.
And sometimes you see scrollbars appear and disappear as well, but not always.

So what is happening here? Well, that took me way too long to find out (what else is new...) and turned out to be quite easy to fix.
The culprit here is the overflow CSS property.
For modal dialog this is set to "auto", which means "If overflow is clipped, a scroll-bar should be added to see the rest of the content".
And for some reason Chromium-based browsers keep changing their mind about whether or not to show the scrollbars during rendering, and they flip back and forth.

To fix this all you need is a bit of CSS - add it to the page somewhere, e.g. under "Page -> CSS -> Inline":


Disable Escape Key (ESC) to Prevent Close Dialog
"Open your dialog page in Oracle Apex. Then right side in the property palette, scroll down to the Dialog section and add the following code to the Attribute property: closeOnEscape:false
Now save the changes and run its parent page to test and you will see, on Escape key press the dialog will not close."

Return a Value From a Modal Dialog

Return the Dialog Page ID, to identify the Modal window that was closed
See the last comment on this page:


Dynamic Action

Execution Options
Custom Event
Selection Type
JavaScript Expression(s)
Event Scope
True Action
Execution Options
Fire On Initialization