Question

我在尝试重用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。 “名字”，“姓氏”和“电子邮件地址”是使用某些我不理解的fieldtag插件设置的水印。

主要的问题是，必须有一些简单的方法来随后使用对话框，初始化它是第一次的方式。 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");
    }
})

Answer 1

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

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

Answer 2

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

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

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

Answer 3

我弄清楚我在做什么，我猜这是一个非常愚蠢的错误。当通过Dialog添加数据时，为了显示新输入的数据，我使用jQuery hmtl（）方法填充了首先创建页面的整个页面的容器div。我认为这会消除已经存在的东西，但显然不是，也许是因为原始HTML已经在浏览器内存中了？我不确定，无论如何它会导致各种jQuery插件的各种奇怪行为。现在我放弃了这样做，只是用fnReloadAjax（）更新我的dataTables，各种各样的问题开始消失。感谢大家的贡献。

重用jQuery-UI对话框

3 个答案: