1

我在尝试了解如何将“退出前保存”插件与 Oracle ApEx v4.1.1 中的模态页面插件一起使用时遇到了麻烦。

我基本上想知道当用户对页面上的选择列表或文本区域字段进行更改时，如何将“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 :::::

4

2 回答 2

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 以“X”和 ESC 键的形式提供关闭选项。我想抓住两者（/全部）。
我没有选择取消绑定 X 上的点击并绑定新的点击。

  • 我首先做的是保存默认的彩盒关闭事件，然后覆盖默认值。

     var default_colorbox_close = $.colorbox.close;
 $.colorbox.close = function(){

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

     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 对话框来做到这一点。它将具有“未保存的更改！” 作为标题和 2 个按钮（“不要关闭”和“关闭”）。关闭时，退出前保存插件必须禁用其默认警告！如果没有，您仍然会收到 onbeforeunload 消息的提示！然后必须关闭颜色框（这将删除 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

于 2012-09-04T13:36:28.867 回答
1

我想在答案中添加一些内容。我注意到更改的项目没有突出显示。所以我在关闭对话框之前将此行添加到“不要关闭”中。

iframeDoc.apex_save_before_exit('modifiedItems', {highlight:true});

它会突出显示应有的项目！

于 2014-01-30T15:18:59.150 回答