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:
http://hardlikesoftware.com/weblog/2015/05/22/apex-5-0-dialogs/
http://monkeyonoracle.blogspot.com/2010/07/modal-pop-up-with-dynamic-actions.html
http://max-tremblay.blogspot.com/2016/11/handling-dialog-cancel-event.html
https://explorer.co.uk/modal-dialog-tips-and-tricks/
https://docs.oracle.com/database/apex-18.1/AEAPI/Events.htm#AEAPI-GUID-CAE63675-7991-429C-950D-07BB2DCA4F09
https://docs.oracle.com/database/apex-18.1/HTMDB/manually-refreshing-oracle-application-express-components.htm#HTMDB30267

Flicker

If your modal dialog behaves like this:
Flicker
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":

Miscellaneous

Disable Escape Key (ESC) to Prevent Close Dialog
https://www.foxinfotech.in/2020/08/oracle-apex-disable-escape-key-to-prevent-close-dialog.html.
"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
https://oracle-base.com/articles/misc/apex-tips-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: https://community.oracle.com/tech/developers/discussion/4478903/dialog-closed-event-does-not-fire

Code

Dynamic Action

Identification
Name
Execution Options
Sequence
When
Event
Custom Event
Selection Type
JavaScript Expression(s)
Advanced
Event Scope
True Action
Identification
Action
Settings
Code
Execution Options
Sequence
Fire On Initialization