发现问题:
只需将row.replaceWith
替换为row.parent().parent().replaceWith()
。
我在模态对话框中单击了一个提交按钮后,我正在尝试使用JQuery更新WebGrid行,但更新的数据只是附加了最后一列,而不是我想要的整行。
假设我希望在更新后表格看起来像这样:
ID - Name - Phone number
但是我的代码在更新后看起来像这样:
ID - Name - ID - Name - Phone number
因为它只是将最后一列替换为最后一列中包含更新数据的新表。
我正在获取正确的数据作为输出,但是在行中的错误位置。
请帮忙! :)
以下是Javascript代码:
$(function () {
$("#edit-event-dialog").dialog({
resizable: false,
height: 300,
modal: true,
autoOpen: false,
open: function (event, ui) {
var objectid = $(this).data('id');
$('#edit-event-dialog').load("/Events/CreateEditPartial", { id: objectid });
},
buttons: {
"Save": function () {
var ai = {
EventID: $(this).data('id'),
Name: $("#Name").val(),
Phone: $("#Phone").val()
};
var json = $.toJSON(ai);
var row = $(this).data('row');
$.ajax({
url: $(this).data('url'),
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
var grid = $(".pretty-table");
row.replaceWith('<tr><td>' + data.ev.EventID + '</td><td>' +
data.ev.Name + '</td><td>' + data.ev.Phone + '</td></tr>');
},
error: function (data) {
var data = data;
alert("Error");
}
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#event-edit-btn").live("click", function () {
var url = $(this).attr('controller');
var row = $(this);
var id = $(this).attr('objectid');
$("#edit-event-dialog")
.data('id', id)
.data('url', url)
.data('row', row)
.dialog('open');
event.stopPropagation();
return true;
});
答案 0 :(得分:1)
您已将row
设置为$(this)
,您的情况代表$("#event-edit-btn")
(顺便提一下,我建议使用类作为标识符,但这不是问题)。稍后您使用新的<tr>
集替换实际按钮,但实际需要做的是遍历该按钮的tr
父项并替换它。
将您的实时处理程序更改为:
$("#event-edit-btn").live("click", function () {
var url = $(this).attr('controller');
var row = $(this).closest('tr'); //or use some #id or .class assigned to that element
var id = $(this).attr('objectid');
$("#edit-event-dialog")
.data('id', id)
.data('url', url)
.data('row', row )
.dialog('open');
event.stopPropagation();
return true;
});