AJAX 请求完成后变量不刷新

本文介绍了AJAX 请求完成后变量不刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在页面中有一个对象"网格.例如:

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>');模态对话框({模态:真，宽度:300，身高:300，自动打开:真});modal.find(">div").load('someurl', function(){modal.dialog('打开');modal.find("#finish-button").click(function() {var var1 = $('#someid1').val();var var2 = $('#someid2').val();$.ajax({网址:'someurl'，类型:'发布'，数据: {'v1' : var1,'v2' : var2},成功:函数(数据){modal.dialog('关闭');//这里是一些刷新代码，用于刷新页面中已编辑的信息...没什么大不了的}});});});});

解决方案

我认为问题在于您正在重新创建对话框，但您并没有破坏旧的对话框.它可能从您创建的第一个值中获取值.尝试向 modal.dialog() 函数添加一个 close 回调，该函数会像这样删除 div:

modal.dialog({模态:真，宽度:300，身高:300，自动打开:真关闭:函数(){ modal.remove()；}//$(this).remove();也可能奏效.});

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

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

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

I have a grid of the 'objects' in the page. For example:

obj1, obj2, obj3, ...

Every object has an option 'Edit', which opens the modal window (ui.dialog) and loads (.load()) the template, where are some inputs, textareas, etc. to edit the information about the object. There is a button 'Finish editing', which sends POST request to the PHP file via AJAX .post(). After that information about the object must be edited.

There aren't problems with PHP or MySQL, the problem is only in JS. After the first update everything seems to be fine, but when i click on the 'obj2' to edit it and press 'Finish editing', variables, in which i wrote the input values - are from the previous operation.

obj1. var1 = 'text1'; var2 = 'text2';

obj2. var1 = 'text3'; var2 = 'text4';

For example in 'obj1' i have sent the next data: 'v1' : var1, 'v2' : var2. Its ok. But in 'obj2' it sent the 'text1' and 'text2' too, not the 'text3' and 'text4'.

I have done the var1.val(''), but it didnt helped, second time it had sent the empty value :)

The code:

$(".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 } }); }); }); });

解决方案

I think the problem is that you're recreating the dialog, but you're not destroying the old one. It's probably getting the values from the first one you create. Try adding a close callback to the modal.dialog() function which removes the div like so:

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

This should remove your original div so that next time the modal dialog is opened the IDs within it are still unique.

You can verify that this is happening by using your browser's tools and checking to see what the DOM looks like after the second one is run.

Edit You're other option is to save the dialog in a global variable, and then check if it has been defined yet. If it hasn't do what you're doing. If it has, set a variable to tell it what the ID is of the item you're editing and reset all the text boxes to blank before running .dialog("open"); again.