Question

我在页面中有一个'对象'网格。例如：

obj1，obj2，obj3，...

每个对象都有一个选项'Edit'，它打开模态窗口（ui.dialog）并加载（.load（））模板，其中有一些输入，textareas等，用于编辑有关对象的信息。有一个按钮'完成编辑'，它通过AJAX .post（）将POST请求发送到PHP文件。之后，必须编辑有关对象的信息。

PHP或MySQL没有问题，问题只出在JS中。在第一次更新后，一切似乎都很好，但是当我点击“obj2”进行编辑并按“完成编辑”时，我写入输入值的变量来自上一次操作。

OBJ1。 var1 ='text1'; var2 ='text2';

OBJ2。 var1 ='text3'; var2 ='text4';

例如在'obj1'中我发送了下一个数据：'v1'：var1，'v2'：var2。没关系。但是在'obj2'中它也发送了'text1'和'text2'，而不是'text3'和'text4'。

我已经完成了var1.val（''），但它没有帮助，第二次它发送了空值：）

代码：

$(".edit").click(function(){
    var modal = $('<div class="dialog" id="dialog-new-message"><div></div></div>');
    modal.dialog({
        modal: true,
        width: 300,
        height: 300,
        autoOpen: true
    });

    modal.find(">div").load('someurl', function(){
        modal.dialog('open');
        modal.find("#finish-button").click(function() {
            var var1 = $('#someid1').val();
            var var2 = $('#someid2').val();
            $.ajax({
                url: 'someurl',
                type: 'post',
                data: {
                    'v1' : var1,
                    'v2' : var2
                },
                success: function(data) {
                    modal.dialog('close');
                    // here is some refresh code to refresh the edited info in the page ... nothing serious
                }
            });
        });
    });
});

Answer 1

我认为问题在于您正在重新创建对话框，但是您并没有破坏旧对话框。它可能从您创建的第一个值中获取值。尝试将close回调添加到modal.dialog()函数，该函数会删除div，如下所示：

modal.dialog({
    modal: true,
    width: 300,
    height: 300,
    autoOpen: true
    close: function() { modal.remove(); } //$(this).remove(); Might also work.
});

这应删除原始div，以便下次打开模态对话框时，其中的ID仍然是唯一的。

您可以使用浏览器的工具验证是否发生了这种情况，并检查在运行第二个DOM之后DOM的样子。

修改
您还可以选择将对话框保存在全局变量中，然后检查它是否已定义。如果它没有做你正在做的事情。如果有，请设置一个变量，告诉它您正在编辑的项目的ID是什么，并在再次运行.dialog("open");之前将所有文本框重置为空白。

AJAX请求完成后，变量不会刷新

1 个答案: