初めて 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.");
});
データを取得しているという点で機能しましたが、テーブル行を既存のテーブルに追加すると、セルの形式が正しくありません。firebug で 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' );
}
}
});
});
}