jQuery UI Dialog表单，AJAX和验证器只能正常工作一次

I've been working on a simple JQuery dialog form that loads in via AJAX. It uses JQuery Tools to validate, and if successful, submits via AJAX and closes. Here's the code that opens the dialog via AJAX (via a nice little link):

我一直在研究一个简单的JQuery对话框表单，它通过AJAX加载。它使用JQuery Tools来验证，如果成功，则通过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>

As you can see, the dialog is loaded in from the page "dialog_clientEdit.php". The dialog loads in with it's own processing script, and once filled in and submitted successfully, send the data via AJAX and if there are no errors, closes itself and destroys the validator and the dialog:

如您所见，该对话框是从“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>

The problem is this: the form only submits one time. You can fill it out, the validition works fine, and all the AJAX fires correctly and everyone is happy. Then, when you try a second time, the validator no longer works and clicking the Create Note button basically does nothing... the dialog never submits and the AJAX never fires.

问题是：表单只提交一次。你可以填写它，验证工作正常，所有的AJAX都正常启动，每个人都很高兴。然后，当你第二次尝试时，验证器不再有效，单击Create Note按钮基本上什么也没做......对话框从不提交，AJAX永远不会触发。

I'm making sure to destroy the dialog and validator after it's closed. The dialog re-opens fine, but the datepicker doesn't work on the second opening, there's no more validition and the form can't submit.

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

Sorry that I'm including all of the code, but I really don't know where the error is here. I'm sure it has something to do with the way I'm closing it (or re-opening it, or both). Can anyone help?

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

2 个解决方案

#1

Not sure what you're doing in the sample link you provided, but (1) the dialog doesn't even show up in Chrome for Mac, (2) it only barely works in Firefox 5 for Windows, and (3) it's completely malformed and the layout is messed up in IE 9.

不确定你在你提供的示例链接中做了什么，但是（1）对话框甚至没有显示在Chrome for Mac中，（2）它几乎不适用于Firefox 5 for Windows，（3）它完全是格式错误，IE 9中的布局搞砸了。

When I use Firebug to watch what the page is doing, it see a ton of syntax errors, and other problems. My guess is that you've got either a small typo that's causing a cascading effect, or a deeper problem in your script that is causing all kinds of weird behavior.

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

If I were you, I would take a look at it in Firebug on your own, try to eliminate all those syntax errors first, and go from there.

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

Under IE 9, even when I try to submit a new, public note the first time, I get the following error popup:

在IE 9下，即使我第一次尝试提交新的公开说明，我也会收到以下错误：

#2

After MUCH testing, I found that every time the dialog was created and closed, the remaining form and it's elements remained in the DOM. Subsequent calls to the dialog would fire on the old form which is why the datepicker, validation and submission stopped working.

经过多次测试，我发现每次创建和关闭对话框时，剩余的表单及其元素都保留在DOM中。对该对话框的后续调用将触发旧表单，这就是datepicker，验证和提交停止工作的原因。

To fix the issue, I just replaced this line on the Close event for the dialog function:

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

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

...with this one:

......这一个：

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

This new line destroys the dialog and then removes the div that was holding the dialog from the DOM (in the case of the code above, referenced by the variable "dialogDiv").

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

All problems solved!

所有问题都解决了