我第一次使用 jquery post() ,我不能简单地附加返回的数据。在我的情况下,数据只是我的操作调用的页面中的一个表格行。我有这个
$.post(mysaveurl , $("#installment_form").serialize(), "html")
.success(function(data){
$( "#paymentplantable table tbody" ).append( data );
$dialog.dialog( 'destroy' );
}).error(function(){
alert("Please ensure that all fields are populated.");
});
我的数据正在访问数据库,但对话框不会破坏。这意味着我要添加的行会终止流程。注意:上面我使用了“html”参数,我不确定它是否合法,因为我只看到示例中使用了 xml 和 json。然后我将其修改为
$.post(mysaveurl , $("#installment_form").serialize())
.success(function(data){
$dialog.dialog( 'destroy' );
var content = $( data ).find( 'tr' );
$( "#paymentplantable table tbody" ).append( content );
}).error(function(){
alert("Please ensure that all fields are populated.");
});
它的工作原理是我正在获取我的数据,但是当我将表格行附加到现有表格时,单元格格式错误。如果我用萤火虫检查 DOM,表格在结构上是正确的,但是它没有显示为正确的表格行,所有数据都被“挤压”到左侧。
然后我觉得 HTML 没有正确传递,所以我使用了 jquery html() 方法,如下所示
var content = $( data ).find( 'mydivwrapper' ).html();
其中“mydivwrapper”是放置在 tr 周围的 div,也通过返回的“数据”进入。这也是个坏主意。
请帮忙。
编辑:
我稍微改变了我的脚本。看这个
dataString = $("#installment_form").serialize();
$.ajax({
type: "POST",
url: mysaveurl,
data: dataString,
dataType: "text",
success: function(data) {
alert(data);
}
});
当我提醒返回的数据时,我得到了这个
<?xml version="1.0" encoding="UTF-8"?>
<html><tr><td>31</td><td>147.0</td><td>Monday 14 November, 2011</td><td style="height:20px; width:20px;" class="edit_in_table"/><td style="height:20px; width:20px;" class="remove" id="/starburst/invoices/removeInstallment/14/31"/></tr></html>
已解决:我在操作中构建了表格行并将标记作为字符串返回。不知道为什么会发生上述行为。
此外,为了任何阅读这篇文章的人的利益,我在 jquery 对话框中发布我的表单时遇到了很大的困难。你看,我动态创建了对话框,它不在 DOM 中,我不得不调用 $("#mydialig").remove(); 让我的日期选择器每次都显示出来,并防止表单提交以前的值。希望对您有所帮助,这是最终代码。
function addInstallment(){
$("#newinstallment").live("click", function(){
var $dialog = $('<div></div>');
var mysaveurl = $(this).attr("saveurl");
$dialog.load($(this).attr("formurl"), function(){
$( "#mydatepicker" ).datepicker();
}).dialog({
title: 'Add new payment item',
width: 450,
modal: true,
buttons: {
Save: function() {
dataString = $("#installment_form").serialize();
$.ajax({
type: "POST",
url: mysaveurl,
data: dataString,
dataType: "text",
context: $(this),
success: function(data) {
$( "#paymentplantable table tbody" ).append(data);
var newremoveurl = "${removeinsturlNoIds}"+$("#paymentplantable tr:last td:last").attr("id");
$("#paymentplantable tr:last td:last").attr("id", newremoveurl);
$( this ).remove();
}
});
},
Cancel: function() {
$( this ).dialog( 'destroy' );
}
}
});
});
}