DirtyFormsを使用していますが、プラグインの基本機能は動作しています。ユーザーがページから移動しようとすると、ブラウザーは確認ダイアログをスローします。
モーダル確認には jQuery UI のダイアログを使用しています。これを DirtyForms で動作させようとしています。これには、jQuery UI ダイアログを直接参照する例があります。ページから直接例を使用してカスタム ダイアログを設定していますが、jQuery ダイアログを使用しておらず、ブラウザのネイティブ ダイアログを引き続き使用しています。
$.DirtyForms.dialog = {
selector: '#unsavedChanges',
fire: function(message, dlgTitle) {
$('#unsavedChanges').dialog({title: dlgTitle, width: 350, modal: true});
$('#unsavedChanges').html(message);
},
bind: function() {
$('#unsavedChanges').dialog('option', 'buttons',
[
{
text: "Stay Here",
click: function(e) {
$.DirtyForms.choiceContinue = false;
$(this).dialog('close');
}
},
{
text: "Leave This Page",
click: function(e) {
$.DirtyForms.choiceContinue = true;
$(this).dialog('close');
}
}
]
).bind('dialogclose', function(e) {
// Execute the choice after the modal dialog closes
$.DirtyForms.choiceCommit(e);
});
},
refire: function(content) {
return false;
},
stash: function() {
return false;
}
}
プラグインのデバッグをオンにすると、エラー (またはその他の JS エラー) は表示されませんが、モーダル ダイアログは起動せず、ブラウザーのネイティブ ダイアログのみが起動します。同じページに実装された他の jQuery UI ダイアログが機能します。ここで何が欠けているのかわかりません。どんな助けや洞察も大歓迎です。