Warn Before Closing APEX Modal Dialogs

Posted on Posted in APEX, Javascript, Modal Dialogs, Oracle

As you may already know, APEX 5.1 implements native Warn Before Exit functionality. Basically, if the user makes changes on a page and tries to navigate away before they save their changes, they get a warning. Modal Pages also get this feature, with one caveat; the close “X” on the window does not warn.
As I understand, this is was the intended behavior. However, for some use cases, I disagree. For this reason, and after a client’s request, I came up with this solution.
On the Modal Page attributes, we specify a “beforeClose” function. Like so:

beforeClose: warnOnClose

Then, on the calling page (or globally) you want the following code:

function warnOnClose(event, ui){
  var apexiFrame = $("iframe").get(0).contentWindow.apex;
  var hasChange = apexiFrame.page.isChanged();

  if (hasChange) {
    // var lMessage = apex.lang.getMessage( "APEX.WARN_ON_UNSAVED_CHANGES" );
    var lMessage = "There are unsaved changes. Do you want to continue?";
    var ok = confirm(lMessage);
    if ( !ok ) {
      event.preventDefault();
    }
  }
  return hasChange;
}

Line 2 and 3 are the most important to this whole solution. Modal Dialogs run inside an iframe. As such, the calling page needs to take a peek inside the dialog and see if something was changed.
Line 2 gets a hold of the “apex” namespace for the dialog. Line 3 can then check is anything has changed within it.

Finally, line 10, prevents the close even from happening and maintains the dialog opened if they user opts to stay.

I should mention, I tried to use apex.message.confirm instead of the more rudimentary confirm, however because we’re already inside a modal, calling apex.message.confirm would invariably end up closing the modal I wanted to keep open. Perhaps, there’s a way to accomplish this, if you have any ideas, please share in the comments.

About

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm an APEX Tech Lead DRW. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

23 Comments on “Warn Before Closing APEX Modal Dialogs”

  5. Great work, thank you!

    I tried this in 5.1.0 and I now get the message on close X, Cancel button and also when I SAVE the record, although the save happens successfully after I OK the message box.

    Reply

    • Hi Waqar, did you get this to work? I get a message for unsaved changes even when I click the SAVE button, although the SAVE button is set to ‘do not check’

      Reply

  9. var secondComing = ‘NO’;

    function warnOnClose(event, ui){
    var apexiFrame = $(“iframe”).get(0).contentWindow.apex;
    var hasChange = apexiFrame.page.isChanged();

    if (hasChange) {
    // var lMessage = apex.lang.getMessage( “APEX.WARN_ON_UNSAVED_CHANGES” );
    /*
    var lMessage = “There are unsaved changes. Do you want to continue?”;
    var ok = confirm(lMessage);
    if ( !ok ) {
    event.preventDefault();
    }
    }
    */
    if (secondComing !== ‘YES’) {
    event.preventDefault();
    apex.message.confirm(‘My Confirm Message’
    , function(result){
    if(result===true){
    secondComing = ‘YES’;
    apex.navigation.dialog.cancel(true);
    }else{
    secondComing = ‘NO’;
    }
    }
    );
    } else {
    secondComing = ‘NO’;
    }

    return hasChange;
    }
    }

    Reply

  12. Tested on 19.2 -> works pretty nice. Reminder: the code of the function needs to be put on the parent page (the one before the modal dialog was opened) in the section “Function and Global Variable Declaration”. Unfortunately – as others reported – I also get the warning even when I press the SAVE button (although the setting for the SAVE button “Warn on unsaved changes” is set to “Do not check”. It could be great if somebody had a workaround for this. It is really really sad, that such an important functionality for modal dialogs does not come out-of-the box from Oracle. As nice as the modal dialogs are, the bad handling of notifications (e.g. missing a simple fading-out success message on the parent page after processing records and after modal dialog closed) is still a nightmare for me, even after I spent tens of hours of searching and testing different workarounds. Thanks

    Reply

  13. Hi
    is there any way to remove the message from the interactive grids “There are unsaved changes. Do you want to continue?” ?.
    I appreciate your answer greetings

    Reply

  14. The function triggers an error in Google Chrome because it isn’t keen on the parent document querying the content of the iframe. Changing the first line of the function to this solves that problem:

    var apexiFrame = $(event.target).children().get(0).contentWindow.apex;

    Reply

  15. The workaround for the warning appearing on submit buttons as well as cancel buttons is pretty straightforward – we can identify submit buttons using their “onclick” attribute. So the whole function now becomes:

    function warnOnClose(event, ui){

    var apexiFrame = $(event.target).children().get(0).contentWindow.apex;
    var triggeringElement = $(event.target).children().get(0).contentWindow.document.activeElement;
    var submitbutton = $(triggeringElement).attr(“onclick”).indexOf(“apex.submit”) > -1 ? true : false;
    var hasChange = apexiFrame.page.isChanged();

    if (hasChange && !submitbutton) {
    // var lMessage = apex.lang.getMessage( “APEX.WARN_ON_UNSAVED_CHANGES” );
    var lMessage = “There are unsaved changes. Do you want to continue?”;
    var ok = confirm(lMessage);
    if ( !ok ) {
    event.preventDefault();
    }
    }
    return hasChange;

    }

    Reply

    • Thank you so much for a great workaround, but in my case I’m using a DA to submit the page, so I just change a little as below and your code working awesome.

      add a css class (js-ignoreChange) in required buttons.
      change the first line with second one.
      var submitbutton = $(triggeringElement).attr(“onclick”).indexOf(“apex.submit”) > -1 ? true : false;
      var submitbutton = $(triggeringElement).hasClass(“js-ignoreChange”);

      Thanks,
      Waqar Siddiqui

      Reply

    • Hi, nice solution, thank you.
      There is one issue only- when I press ‘cancel’, and do anotther change, and then ‘save’ the modal window is not closing.
      any ideas?

      Reply

  16. k123 – I found this when going from 20.2 to 22.1.
    Trying to isolate why…
    It seems the DA event is firing, but it’s not calling the beforeClose function on the second attempt.

    Reply

I love comments, write me a line