AJAX 请求完成后变量不刷新答案

【问题标题】：Variables doesnt refresh after AJAX request completedAJAX 请求完成后变量不刷新
【发布时间】：2011-07-06 14:02:16
【问题描述】：

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

obj1, obj2, obj3, ...

每个对象都有一个“编辑”选项，它打开模式窗口 (ui.dialog) 并加载 (.load()) 模板，其中包含一些输入、文本区域等以编辑有关对象的信息。有一个“完成编辑”按钮，它通过 AJAX .post() 向 PHP 文件发送 POST 请求。之后，必须编辑有关对象的信息。

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

obj1。 var1 = '文本1'; 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
                }
            });
        });
    });
});

【问题讨论】：

标签： jquery ajax modal-dialog

【解决方案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 在第二个运行后的样子来验证是否发生了这种情况。

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

【讨论】：