1

我一直在研究一个通过 AJAX 加载的简单 JQuery 对话框表单。它使用 JQuery 工具进行验证，如果成功，则通过 AJAX 提交并关闭。这是通过 AJAX 打开对话框的代码（通过一个不错的小链接）：

<script type="text/javascript">
var activeDialog;
$(function (){
    $('a.ajax').click(function() {
        var dialogDiv = '<div style="display:hidden" id="dialogDiv" title="'+this.title+'"></div>';
        var dialog = $(dialogDiv).appendTo('body');
        // load remote content
        activeDialog = dialog.load(
            this.href, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({
                    resizable: true,
                    title: this.title,
                    autoOpen: true,
                    height: 350,
                    width: 600,
                    modal: true,
                    close: function(event, ui) {
                        try {$("#addNoteForm").data("validator").destroy();}catch(e){}
                        $(this).dialog("destroy");
                    }
                });
            }
        );
        return false;
    });
});
</script>
<BR><BR>
<a class="ajax" href="dialog_clientEdit.php?cid=172" title="Add New Note">Create note</a>

如您所见，对话框是从“dialog_clientEdit.php”页面加载的。对话框使用自己的处理脚本加载，一旦填写并提交成功，通过 AJAX 发送数据，如果没有错误，则关闭自身并销毁验证器和对话框：

<div id="dialogNote9356904" title="Add New Note">
    <form action="process_note.php" method="post" name="addNoteForm" id="addNoteForm" class="form has-validation">
    <fieldset style="border:none;">
        <div class="clearfix">
            <label for="form-note" class="form-label">Note <em>*</em></label>
            <div class="form-input form-textarea"><textarea id="form-note" rows="5" name="note" required="required" /></textarea></div>
        </div>
        <div class="clearfix">
            <label for="form-notedate" class="form-label">Date <em>*</em><small>mm/dd/yyyy</small></label>
            <div class="form-input"><input type="date" id="form-notedate" name="date" data-value="03/05/2004" format="mm/dd/yyyy" required="required" /></div>
        </div>
        <div class="clearfix">
            <label class="form-label">Visibility <em>*</em><small>Private not visible to client</small></label>
            <div class="form-input"><label for="form-visibility-private"><input type="radio" name="visibility" id="form-visibility-private" value="private" checked /> Private</label> <label for="form-visibility-public"><input type="radio" name="visibility" id="form-visibility-public" value="public" /> Public</label></div>
        </div>
        <div class="form-action clearfix">
        <button class="button" id="submitNote" type="button" data-icon-primary="ui-icon-circle-check">Create Note</button>
            <button class="button" type="button" onClick="activeDialog.dialog("close");">Cancel</button>
            <span id="addDialogLoader"></span>
        </div>
    </fieldset>
    </form>
</div>
<script>
$('#submitNote').click(function () { 
    var form = $('#addNoteForm');
    if(form.data("validator").checkValidity()){
        var formData = $(form).serialize();
        // Save form via AJAX
        var ajax_load = "<img src='../images/ajax-loader.gif' alt='Saving...' />";
        var loadUrl = "process_note.php?cid=172";
        $("#addDialogLoader").html(ajax_load).load(loadUrl, formData, function(response, status, xhr) {
            if (status != "error") {
                if(response == "1"){
                    activeDialog.dialog("close");
                } else { alert("There was an error saving this note: "+response); }
            } else {
                 alert("An error occurred while performing your request: " + xhr.status + " " + xhr.statusText);
            }
        });
    }
    return false;
});
</script>

问题是：表单只提交一次。您可以填写它，验证工作正常，并且所有 AJAX 都正确触发并且每个人都很高兴。然后，当您第二次尝试时，验证器不再工作，单击“创建注释”按钮基本上什么都不做……对话框永远不会提交，AJAX 永远不会触发。

我确保在对话框和验证器关闭后销毁它。对话框重新打开正常，但日期选择器在第二次打开时不起作用，没有更多的验证并且表单无法提交。

抱歉，我包含了所有代码，但我真的不知道错误在哪里。我确定这与我关闭它（或重新打开它，或两者兼而有之）的方式有关。任何人都可以帮忙吗？

4

2 回答 2

1

不确定您在提供的示例链接中在做什么，但是（1）该对话框甚至没有出现在 Chrome for Mac 中，（2）它仅在 Firefox 5 for Windows 中几乎不工作，（3）它完全在 IE 9 中格式错误且布局混乱。

当我使用 Firebug 观察页面在做什么时，它会看到大量的语法错误和其他问题。我的猜测是，您要么有一个导致级联效应的小错字，要么是您的脚本中的一个更深层次的问题，导致了各种奇怪的行为。

如果我是你，我会自己在 Firebug 中查看它，尝试首先消除所有这些语法错误，然后从那里开始。

在 IE 9 下，即使我第一次尝试提交新的公开注释，我也会收到以下错误弹出窗口：

在此处输入图像描述

于 2011-06-29T03:19:35.217 回答
0

经过大量测试，我发现每次创建和关闭对话框时，剩余的表单及其元素都保留在 DOM 中。随后对对话框的调用将在旧表单上触发，这就是日期选择器、验证和提交停止工作的原因。

为了解决这个问题，我刚刚在对话框函数的 Close 事件中替换了这一行：

$(this).dialog("destroy");

...有了这个：

$(this).dialog("destroy").remove();

这一新行破坏了对话框，然后从 DOM 中删除了保存对话框的 div（在上面的代码中，由变量“dialogDiv”引用）。

所有问题都解决了！

于 2011-06-29T22:03:35.443 回答