重用 jQuery-UI 对话框答案

【问题标题】：Reusing jQuery-UI Dialog重用 jQuery-UI 对话框
【发布时间】：2011-11-03 01:00:10
【问题描述】：

我在尝试重用 jQuery-UI 对话框时遇到了各种各样的问题。第一次一切正常。第二次，文本字段具有第一次到以前的值。为了使其工作，在我执行对话框（“打开”）之后的 click（）函数中，我使用 $("#fname, #lname, #email").val(''); 手动清除文本字段值。这有效地清除了重复使用的字段，但是当我使用 serialize() 方法提交表单时，发送的数据看起来像这样fname=two&lname=2&email=two@aol.com&fname=First+Name&lname=Last+Name&email=Email+ad dress。 “名字”、“姓氏”和“电子邮件地址”是使用一些我不理解的字段标签插件设置的水印。

主要问题是，必须有一些简单的方法可以在随后使用对话框，并按照第一次的方式进行初始化。 close() 方法似乎没有做到这一点。正在创建对话框，其中 autoOpen 设置为 false。

$("#user-form").dialog({
    autoOpen: false,
    height: 400,
    width: 625,
    modal: true,
    resizable: false,
    open: function(event, ui) {
        $("#fname, #lname, #email").val('');
        },
    buttons: {
        "Update": function () {
            var bValid = true;

            allFields.removeClass("ui-state-error");
            if (bValid) {
                $.get('AJAX/AddEditUser.php', $("#fname, #lname, #email").serialize(), function(){
                    $.get('users.php', function(data){
                        $("#contentcontainer").html(data);
                    });
                });
                $(this).dialog("close");
                $("#wholeArea").hide();
                $("#placeholder").show();
                $("div.content-area").load('home.html');
            }
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    },
    close: function () {
        allFields.val("").removeClass("ui-state-error");
    }
})

【问题讨论】：

我们能看到打开对话框的代码吗？
对于您可能收到的所有通知，我们深表歉意。

标签： jquery jquery-ui

【解决方案1】：

jquery-ui 对话框不会在关闭时清除其中的任何内容，它的目的是将 div 显示为对话框并让您自定义它的外观和行为方式，这意味着如果您输入值并且不要在关闭时清除它们，这些值仍然会保留。

提交水印文本的原因是因为您的水印代码将文本放在输入元素中并且在表单提交时没有清除它，另一种方法是找到另一个在输入后面添加跨度的水印插件元素代替，这将完全消除问题。

【讨论】：

我已经删除了对 fieldtag 插件的所有引用。现在，当我进行后续输入时，传递给 php 的数据如下所示：fname=two&lname=2&email=two@aol.com&fname=&lname=&email= 换句话说，数据字段附加了空白值。 PHP 只看到最后一组，当它进入数据库时它会出错，因为字段不允许为空。
@user38653 看起来好像每个字段有 2 个元素（好像两个元素具有相同的 Id），请您添加相关的 html 吗？
每个表单元素实际上只有一个字段。如果我第三次运行它，就会出现第三组变量。 update 方法要么是向表单添加一组字段，要么是 serialize() 认为是的。
@user39653 我试图复制您的问题，老实说，您必须添加更多具有相同 id 的元素，可能在 "$("#contentcontainer").html(data) ;"但这一切都取决于“数据”是什么，我怀疑它是html元素，如果您在运行页面时使用firebug之类的工具应该能够验证它。

【解决方案2】：

与 Joakim 类似，我也怀疑是水印插件正在发挥作用。尝试禁用它并查看您的表单数据是否符合预期。

此外，您可以使用open 事件在对话框每次打开时对其进行初始化：

$('#dialog').dialog({
    open: function(event, ui) {
        $("#fname, #lname, #email").val('');
    },
    autoOpen: false,
    /* your other options... */
});

【讨论】：

我认为你们是对的，水印让我很伤心。我正在使用我不理解的 fieldtag 插件。我认为我已经为这个控件禁用了它（我没有看到水印）但是现在当我通过查看 serialize() 产生的内容来查看提交的数据时，我得到以下看起来很古怪的字符串：@ 987654323@ 因此，当 PHP 获取数据时，它会读取最后一组数据并将所有三个字段都视为空。

【解决方案3】：

我弄清楚了我在做什么，我想这是一个非常愚蠢的错误。当通过对话框添加数据时，为了显示新输入的数据，我正在使用 jQuery hmtl() 方法将创建页面的整个页面填充到容器 div 中。我认为这会消除已经存在的内容，但显然不是，也许是因为原始 HTML 已经在浏览器内存中？我不确定，无论如何它会导致各种 jQuery 插件的各种奇怪行为。现在我停止这样做并简单地使用 fnReloadAjax() 更新我的数据表，各种问题开始消失。感谢大家的贡献。

【讨论】：