Question

我在尝试了解如何使用Oracle ApEx v4.1.1中的Modal Page插件时使用“Save before Exit”插件时遇到了麻烦。

我基本上想知道当用户对页面上的选择列表或文本区域字段进行更改时，如何将“X”关闭按钮附加到“退出前保存”插件（我还有与之关联的类）这些字段），在模态页面中使用？

以下是我试图链接在一起的两个插件的链接：

http://apex.oracle.com/pls/apex/f?p=46685:MODAL_PAGE:0

http://apex.oracle.com/pls/apex/f?p=46685:SAVE_BEFORE_EXIT:0 :::::

Answer 1

重要说明：我测试了此插件的最新版本：3.0.2。变更检测例程有modificationDetected，其中3.0.0是changeDetected！检查您使用的版本！

当我必须整合这些东西时，我想避免改变提供的代码，例如插件代码。如果您以后不记得并且安装新版本（除非您实际上正在修理某些内容），这样做会破坏您的内容。

在调用模式对话框的页面上创建一个动态操作，在加载时触发：

var default_colorbox_close = $.colorbox.close;
$.colorbox.close = function(){
   iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
   iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);

   apex.debug("Colorbox close attempt - check changes");
   var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");
   apex.debug('Modal contains changes: '+hasChange);

   if(hasChange){
      $( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
         resizable: false,
         height:140,
         modal: true,
         stack: true,
         zIndex: 9999,
         buttons: {
            "Don't close": function() {
               $(this).dialog( "close" );               
            },
            "Close": function() {               
               iframeDoc.apex_save_before_exit("disableWarning")
               default_colorbox_close();
               $(this).dialog( "close" );
            }
         }
      });
   } else {
      apex.debug('Close modal with default colorbox close');
      default_colorbox_close();
   };
};

退出插件前的保存使用浏览器window.onbeforeunload事件。它会在弹出窗口关闭时触发（至少在FF中会触发），但到那时为止已经太晚了：弹出窗口也消失了，标记也一样。
我的第一个想法是通过将页面重定向到一个通用页面来简单地点击onbeforeunload事件，该页面将保存onload代码以关闭弹出窗口。一旦尝试重定向，onbeforeunload将立即执行。不会有动态操作或插件更改。但是哦，我决定反对。（请注意：此片段中的大部分代码也必须在这种情况下重复使用，保存更改检测和对话框。）
相反，我选择在关闭事件发生时检查iframe文档中的更改，并显示一个对话框，该对话框也可以修改，并清楚地表明您正在弹出窗口而不是“页面”上执行操作（可能被解释为模态的父页面。

所以需要的是捕获模态弹出关闭事件。请注意，该插件基于jQuery Colorbox插件。 Skillbuilder模式不提供预关闭事件，并且不能在不改变colorbox插件的情况下使用 Colorbox以“X”和ESC键的形式提供关闭选项。我想抓住两个（/全部）我没有选择取消绑定X上的点击并绑定新的点击。

我先做的是保存默认的colorbox close事件，然后然后覆盖默认值。
```
 var default_colorbox_close = $.colorbox.close;
 $.colorbox.close = function(){
```

接下来：这段代码将获取模态的jQuery实例页。然后我用这个jquery获取页面的document元素实例

 iframejQ = $("iframe").get(0).contentWindow.apex.jQuery;
 iframeDoc = iframejQ($("iframe").get(0).contentWindow.document);

接下来检查iframe（模态弹出窗口）是否有更改

 var hasChange = iframeDoc.apex_save_before_exit("modificationDetected");

因此，如果页面有变化，则必须显示警告。我这样做通过使用jQuery-UI Dialog。它将有“未保存的更改！”如题，和2个按钮（“不要关闭”和“关闭”）。关闭时，保存退出插件之前必须禁用其默认警告！如果不，你还会得到onbeforeunload消息的提示！那么必须关闭colorbox（将删除iframe）。最后必须关闭对话框（提示）。

  if(hasChange){
     $( "<div title='Unsaved changes!'>There are unsaved changes. Close the popup anyway?</div>" ).dialog({
        resizable: false,
        height:140,
        modal: true,
        stack: true,
        zIndex: 9999,
        buttons: {
           "Don't close": function() {
              $(this).dialog( "close" );               
           },
           "Close": function() {               
              iframeDoc.apex_save_before_exit("disableWarning")
              default_colorbox_close();
              $(this).dialog( "close" );
           }
        }
     });

如果没有变化，则可以简单地关闭模态。

  } else {
     apex.debug('Close modal with default colorbox close');
     default_colorbox_close();
  };

希望其中一些坚持;）

http://apex.oracle.com/pls/apex/f?p=11128:1

上的示例

修改
并且非常感谢Dan McGhan帮助OTN线程:) https://forums.oracle.com/forums/thread.jspa?threadID=2434115&tstart=0

Answer 2

感谢Tom的回答。

我没有足够的声誉来添加评论。但我想补充一些答案。我注意到更改的项目没有突出显示。因此，在关闭对话框之前，我已将此行添加到“请勿关闭”。

iframeDoc.apex_save_before_exit（'modifiedItems'，{highlight：true}）;

它突出了应该的项目！希望能有所帮助。

Skillbuilders在退出前使用Skillbuilders模态页面保存

2 个答案: