JQuery表单中的更改

时间：2012-10-01 06:18:23

标签： javascript jquery forms

我正在使用JQuery来处理未保存的表单数据中的更改，用户进入页面，编辑数据，尝试离开页面而不保存，因为当我更改了对话框后我收到了对话框形成： enter image description here

上面说：“你想离开这个页面吗？你有未保存的数据，你想保留而不保存你的更改吗？”

它运行良好，并且在很少的代码中具有很多功能：

<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进行测试根据我的规范启用警告：

enter image description here

以上是它的样子。事实是，我希望用户能够更改表单并将其提交到页面而不会收到警告，我还想从警告中排除搜索框“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&auml;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";
    }

}

我想要排除的组件可能是“更新”按钮，因为按“更新”不应激活警告，只留下页面。你能救我吗？

1 个答案:

答案 0 :(得分：1)

无法更改该浏览警告对话框的外观。它是浏览器提供的本机工具。事实上，在Firefox as of version 4上，您甚至无法通过提供自己的字符串作为返回值来自定义消息，而是总是说：

  

“此页面要求您确认是否要离开 - 您输入的数据可能无法保存。”

至于从浏览窗口警告中排除页面上的各种组件，这不仅仅是扩展您已经使用的技术，在您的用户事件处理程序中禁用onbeforeunload事件吗？例如，单击更新按钮或搜索按钮时，您可以首先确保通过将onbeforeunload事件指定为null或no-op函数来“取消挂钩”。

顺便说一下，看看你正在做的所有原始DOM构造（所有appendChild()调用和setAttribute()调用等），我建议你看看一些客户端模板框架。 Here's a decent-looking list of alternatives。来自Google的Angular.js也非常酷，尽管不仅仅是模板系统本身。

相关问题
最新问题