重要な注意:利用可能な最新バージョン: 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 ではそうです)、それまでには遅すぎます: ポップアップがなくなり、マークアップも消えてしまいます。
私が最初に考えたのは、ポップアップを閉じるための onload コードを保持する一般的なページにページをリダイレクトすることで、単に onbeforeunload イベントをタップすることでした。リダイレクトが試行されるとすぐに 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の例
編集:
そして、OTN スレッドを手伝ってくれた Dan McGhan に感謝します :)
https://forums.oracle.com/forums/thread.jspa?threadID=2434115&tstart=0