I am using the jquery post() for the first time and I can't simply append the returned data. In my case the data is simply a table row from the page which my action calls. I have this
$.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.");
});
My data is hiting the database, but the dialog does not destroy. This meens that the line where i am appending kills the flow. NOTE: above i used the 'html' paramiter, I am not sure if its ligal because i only saw xml and json being used in the examples. I then modified it to this
$.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.");
});
It worked in that I am gething my data, however when I append the table row to an existing table, the cells are mal formed. If I inspect the DOM with firebug, the table is strucurally correct, however its is not showing up as a proper table row, all the data is "squeezed" to the left.
I then thaught that the HTML is not being passed correctly, so i used the jquery html() method as follows
var content = $( data ).find( 'mydivwrapper' ).html();
where 'mydivwrapper' is a div placed around the tr and also comes in via the returning "data". This also was a bad idea.
Please help.
EDIT:
I changed my script a little. Se this
dataString = $("#installment_form").serialize();
$.ajax({
type: "POST",
url: mysaveurl,
data: dataString,
dataType: "text",
success: function(data) {
alert(data);
}
});
when i alert the returned data I get this
<?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>
SOLVED: I constructed the table row in my action and returned the mark up as a string. Not sure whay the above behavior occured.
Additionally for the benefit of anyone reading this post, I was haveing great difficulty posting my form in a jquery dialog. You see, I dynamically created the dialog and it was not in the DOM, I had to call $("#mydialig").remove(); to get my datepicker to show up each time as well as prevent the form form submiting previous values. Hope it helps, here is the final code.
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' );
}
}
});
});
}
The data cannot be both structurally correct when inspected in firebug AND be malformed. For example you may have been checking that all opening tags have closing tags that match, that all the
<td>s are in fact inside a<tr>, etc... but did you check the the returned table row has the same number of columns as the table it's being appended to? Are there any styles applied to the table before the ajax appends it rows? (ex: a jQuery grid of sometime where it adds in a bunch of CSS classes to make the table pretty). If this doesn't help you get it right away, copy the table html out of firebug before and after the row has been appended and post the code in your question as an edit.Also you may want to call .dialog('close') before destroy (or even instead of destroy depending on if you plan to reuse the dialog later). Close will visually close the dialog using any configured jQuery effects and firing any necessary event handlers. Destroy is going to actually remove the styles and event handlers from the DOM (without making any use of them).
EDIT: Here's a jsfiddle for you to first check that your code that adds rows to a table works as expected. It works for me so take a look: http://jsfiddle.net/BenSwayne/ADsxU/
Can you set a breakpoint on
$( "#paymentplantable table tbody" ).append( data );in your success handler? That will help you check that the data be returned is in the format you want. (Is it "xml" and not contained inside a property inside the data object?)