Adding data during AJAX success

neobot85

Hi,

I have a table that I am initializing, and then attempting to load with a set of JSON results. The object I am returning has a nested list of another object (a Subscription object with a list of Account objects). Here is my setup:

[code]
$(document).ready(function() {

$('#acctData').dataTable({
"bJQueryUI": true,
"aoColumns":
[
{ "mDataProp": "AccountID" },
{ "mDataProp": "AccountNumber" },
{ "mDataProp": "ValidFrom" },
{ "mDataProp": "ValidTo" },
{ "mDataProp": "InclusionDate" },
{ "mDataProp": "ExclusionDate" },
{ "mDataProp": "RowStatus"}
]
});
});
[/code]

Then later in the page, I have this function that gets triggered by a button click:

[code]
function getSubVisibilityStatus() {
var subid = $("#txtSubID").val();
var asOfDate = $("#ddlReportingPeriods").val();

$.ajax({
"type": "POST",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": "Service.asmx?GetSubscriptionVisibilityStatus",
"data": "{'subId': subid + ", 'asOfDate': '" + asOfDate + "'}",
"success": function (result) {
$('#acctData').dataTable().fnAddData(result.d.Accounts);
},
"error": function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
}
[/code]

I validated that the JSON coming back is what I expect, but I get this error from dataTables:

DataTable warning (table id='acctData'): Requested unknown parameter '0' from the data source for row 0

I'm sure I'm missing something obvious here....can anyone help?

jaspreetsingh

hello,

Just use result.d

in

fnAddData(result.d) like this.

it will work.

Thanks

neobot85

Hi jaspreeetsingh,

Unfortunately, that didn't work. I would have thought I would have needed to reference the Accounts property since that is the nested array of Account objects. However, I tried both result.d and result.d.Accounts and both give the same error.

What I actually ended up doing was initializing the data table in the on click function and then destroying the table with the bDestroy param. That seems to have done the trick.

I'm still very curious why the other way didn't work though....

[code]

function getSubVisibilityStatus() {
var subid = $("#txtSubID").val();
var asOfDate = $("#ddlReportingPeriods").val();

$.ajax({
"type": "POST",
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"url": "Service.asmx?GetSubscriptionVisibilityStatus",
"data": "{'subId': subid + ", 'asOfDate': '" + asOfDate + "'}",
"success": function (result) {

var acctTable = $('#acctData').dataTable({
"aaData": result.d.Accounts,
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"sStripeOdd": "odd",
"iDisplayLength": 100,
"bDestroy": true,
"aoColumns":
[
{ "mDataProp": "AccountID" },
{ "mDataProp": "AccountNumber" },
{ "mDataProp": "ValidFromAsString" },
{ "mDataProp": "ValidToAsString" },
{ "mDataProp": "InclusionDateAsString" },
{ "mDataProp": "ExclusionDateAsString" },
{ "mDataProp": "RowStatus" }
]
});

},
"error": function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
}



[/code]