保存されていないフォーム データの変更を処理するために JQuery を使用しています。ユーザーがページに入り、データを編集し、保存せずにページを離れようとすると、フォームを変更したときにダイアログが表示されるので、うまくいきます。
上記のメッセージ: 「このページを離れますか? データが保存されていません。変更を保存せずに続行しますか?」
それはうまく機能し、非常に小さなコードで多くの機能を備えています。
<script>
$(function() {
// Set the unload message whenever any input element get changed.
$(':input').on('change', function() {
setConfirmUnload(true);
});
// Turn off the unload message whenever a form get submitted properly.
$('form').on('submit', function() {
setConfirmUnload(false);
});
});
function setConfirmUnload(on) {
var message = "Vill du gå vidare utan att spara eventuella ändringar?";
window.onbeforeunload = (on) ? function() { return message; } : null;
}
</script>
私が使用しているものと比較すると、上記は、フォーム データが変更されたかどうかを示す非表示のフォーム変数を使用し、Java と JS の両方でテストして有効にする Java + JS の現在の組み合わせよりもはるかに優れているように見えます私の仕様による警告：
上記は、それがどのように見えるべきかです。問題は、ユーザーがフォームを変更して警告を受けずにページに送信できるようにしたいということです。また、警告から検索ボックス「fastseach」を除外したいので、コンポーネントを除外することは可能ですか? また、ダイアログの表示を自分のものに変更するにはどうすればよいですか? 私自身のダイアログは次のように描画されます。
// is this necessary?
function doAsk(title, msg, action, command, actionNo, commandNo, search) {
document.getElementById("fastsearch").value = search;
document.actionForm.saveStatus.value = ''
var funcYes = 'doYes()';
var funcNo = 'hideDialog()';
if (title == 'Fel') {
var s = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"><input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:"
+ funcNo + "\" value=\"Återgå\" /></div>";
showDialog(title, msg + s);
} else if (title == 'Varning') {
var v = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%\"><input style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:"
+ funcNo
+ "\" value=\"Nej\" /></div><div style=\"position:absolute; left:70%; top:75%\"><input id=\"dialogwarnyes\" style=\"font-family:calibri; width:70px\" type=button onclick=\"javascript:doSubmit('"
+ action + "','" + command + "'); \" value=\"Ja\" /></div>";
showDialog(title, msg + v);
} else if (title == 'Information') {
var i = "<div style=\"position:absolute; z-index:1000001; left:70%; top:75%\"><input type=button class=\"dialogbuttonlink\" id=\"dialogstang\" onclick=\"javascript:hideDialog()\" value=\"Stäng\" /></div>";
showDialog(title, msg + i, true);
} else if (title == 'Fel2') {
title = 'Fel';
var s2 = "<div style=\"position:absolute; z-index:1000001; left:15%; top:75%; font-size: 70% \"><input id=\"dialogaterga\" style=\"font-family:calibri; width:70px; float:right; margin-right:35px;\" type=button onclick=\"javascript:"
+ funcNo + "\" value=\"OK\" /></div>";
showDialog(title, msg + s2);
}
initFocus();
}
function showDialog(title, message, autohide) {
//alert("showdialog");
var type = 'prompt';
var dialog;
var dialogheader;
var dialogclose;
var dialogtitle;
var dialogcontent;
var dialogmask;
var link1
var link2
if (!document.getElementById('dialog')) {
dialog = document.createElement('div');
dialog.id = 'dialog';
link2 = document.createElement('a');
link2.id = 'modalFocusLink';
link2.setAttribute('onclick', 'return false');
link2.setAttribute('onblur', 'redirectFocus');
link2.setAttribute('href', '#');
dialog.appendChild(link2);
dialogheader = document.createElement('div');
dialogheader.id = 'dialog-header';
dialogtitle = document.createElement('div');
dialogtitle.id = 'dialog-title';
dialogclose = document.createElement('div');
dialogclose.id = 'dialog-close'
dialogcontent = document.createElement('div');
dialogcontent.id = 'dialog-content';
dialogmask = document.createElement('div');
dialogmask.id = 'dialog-mask';
document.body.appendChild(dialogmask);
document.body.appendChild(dialog);
dialog.appendChild(dialogheader);
dialogheader.appendChild(dialogtitle);
dialogheader.appendChild(dialogclose);
dialog.appendChild(dialogcontent);
dialogclose.setAttribute('onclick', 'hideDialog()');
dialogclose.onclick = hideDialog;
link1 = document.createElement('a');
link1.id = 'modalBlurLink';
link1.setAttribute('onclick', 'return false');
link1.setAttribute('onfocus', 'redirectFocus');
link1.setAttribute('href', '#');
dialog.appendChild(link1);
} else {
dialog = document.getElementById('dialog');
dialogheader = document.getElementById('dialog-header');
dialogtitle = document.getElementById('dialog-title');
dialogclose = document.getElementById('dialog-close');
dialogcontent = document.getElementById('dialog-content');
dialogmask = document.getElementById('dialog-mask');
dialogmask.style.visibility = "visible";
dialog.style.visibility = "visible";
}
dialog.style.opacity = .00;
dialog.style.filter = 'alpha(opacity=0)';
dialog.alpha = 0;
var width = pageWidth();
var height = pageHeight();
var left = leftPosition();
var top = topPosition();
var dialogwidth = dialog.offsetWidth;
var dialogheight = dialog.offsetHeight;
var topposition = 33;// top + (height / 3) - (dialogheight / 2);
var leftposition = width - dialogwidth - 30; // left + (width / 2) -
// (dialogwidth / 2);
dialog.style.top = topposition + "px";
dialog.style.left = leftposition + "px";
dialogheader.className = type + "header";
dialogtitle.innerHTML = title;
dialogcontent.className = type;
dialogcontent.innerHTML = message;
var content = document.getElementById(WRAPPER);
dialogmask.style.height = content.offsetHeight + 'px';
if (title == 'Information') {
dialog.alpha = 100;
dialog.style.opacity = (1.0);
dialog.style.filter = 'alpha(opacity=' + 100 + ')';
dialog.style.visibility = "visible";
dialogmask.style.visibility = "hidden";
var fodi = document.getElementById("dialogstang");
fodi.focus();
} else {
if (title == 'Fel') {
var fo = document.getElementById("dialogaterga");
fo.focus();
} else if (title == 'Varning') {
var vafo = document.getElementById("dialogwarnyes");
vafo.focus();
}
dialog.timer = setInterval("fadeDialog(1)", TIMER);
if (autohide) {
dialogclose.style.visibility = "hidden";
// window.setTimeout("hideDialog()", (autohide * 1000));
} else {
dialogclose.style.visibility = "visible";
}
if (title == 'invisible')
dialog.style.visibility = "hidden";
}
}
「更新」を押しても警告がアクティブにならず、ページを離れるだけなので、除外したいコンポーネントは「更新」ボタンである可能性があります。手伝って頂けますか？