Ajax call with parameters

clint

Ive been messing around with this for a week, and I think I am going down the wrong path. I have a txt file that has the following data:

[code]
{
"sEcho": 1,
"iTotalRecords": "116",
"iTotalDisplayRecords": "10",
"aaData": [
{"ID":3,"AddressID":2,"ContactType":184,"Code":"Daily","FirstName":"Ed","LastName":"McCready"}, ...
]
}
[/code]

This works fine with the following call:

[code]
$('#ajaxTest').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sAjaxDataProp": "aaData",
"sAjaxSource": "./jsonData.txt",
"bServerSide": false,
"aoColumns": [
{ "mDataProp": "ID" },
{ "mDataProp": "AddressID" },
{ "mDataProp": "ContactType" },
{ "mDataProp": "Code" },
{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
]
});
[/code]

I actually copied the json from what is being returned from a web method and pasted it into a text file to test. But when I try to directly grab the data from the server, I get errors. Here is what I have tried. Keep in mind that my web method is expecting a list of parameters.


[code]
$('#ajaxTest').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sAjaxDataProp": "d",
"sAjaxSource": "test.aspx/DoProc",
"sServerMethod": "POST",
"bServerSide": true,
"fnServerData": function(sSource, aoData, fnCallBack) {
$.ajax({
"type": "POST",
"url": sSource, //"test.aspx/DoProc",
"contentType": "application/json; charset=utf-8",
"data": aoData, //'{"procName":"procGetAllContacts","parmsVals":"","procType":"Select"}',
"dataFilter": function(data) {
msg = eval('(' + data + ')');
msg = msg.d;
fnCallBack('{"sEcho":1,"iTotalRecords":20,"iTotalDisplayRecords":10,"aaData":' + msg + "}");
},
"error": AjaxFailed
});
},
"fnServerParams": function(aoData) { aoData.push({ "procName": "procGetAllContacts", "parmsVals": "", "procType": "Select" }); },
"aoColumns": [
{ "mDataProp": "ID" },
{ "mDataProp": "AddressID" },
{ "mDataProp": "ContactType" },
{ "mDataProp": "Code" },
{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" },
]
});

[/code]


I have tried about every combination and I usually get a 200 error. Sometimes I take out the fnServerParams and use the parameters as you see commented out for the data. Any insight would be appreciated. I feel like I am very close, but Im missing something.

Scones

Try:

[code]
"fnServerParams": function (aoData) {
aoData.push({ "name": "procName", "value": "procGetAllContacts" });
aoData.push({ "name": "parmsVals", "value": "" });
aoData.push({ "name": "procType", "value": "Select" });
},
[/code]

This is my understanding of how to send parameters.

allan

Scones is absolutely correct - you need to use name/value pairs in fnServerParams - like what is used in my examples and shown in the documentation.

> I have tried about every combination and I usually get a 200 error

200 is not an error - it means HTTP OK. I presume you are getting an error from your application though. What is that error?

> fnCallBack('{"sEcho":1,"iTotalRecords":20, ....

This is never going to work for server-side processing. Server-side processing requires that the response from the server be dynamic. For example sEcho _must_ change on every request.

Allan

clint

@Scones - That makes sense. I updated my code to look like this:

[code]
$('#ajaxTest').dataTable({
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"sAjaxDataProp": "d",
"sAjaxSource": "test.aspx/DoProc",
"sServerMethod": "POST",
"bServerSide": true,
"fnServerData": function(sSource, aoData, fnCallBack) {
$.ajax({
"type": "POST",
"url": sSource,
"contentType": "application/json; charset=utf-8",
"data": aoData,
"dataType": 'json',
"success": fnCallBack,
"error": AjaxFailed
});
},
"fnServerParams": function(aoData) {
aoData.push({ "name": "procName", "value": "procGetAllContacts" });
aoData.push({ "name": "parmsVals", "value": "" });
aoData.push({ "name": "procType", "value": "Select" });
},
"aoColumns": [
{ "mDataProp": "ID" },
{ "mDataProp": "AddressID" },
{ "mDataProp": "ContactType" },
{ "mDataProp": "Code" },
{ "mDataProp": "FirstName" },
{ "mDataProp": "LastName" }
]
});
[/code]

@allan - What should I put in fnCallBack? Nothing? Im confused on this.

The above code gives me a 500 error:


{"Message":"Invalid JSON primitive: sEcho.","StackTrace":" at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject()\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth)\r\n at System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.ArgumentException"}


Thanks for the assistance!

allan

> @allan - What should I put in fnCallBack? Nothing? Im confused on this.

fnCallback is just a function reference. Doing:

[code]
"success": fnCallBack
[/code]

is the same as:

[code]
"success": function ( json ) {
fnCallBack( json );
}
[/code]

Just with two less lines of code :-)

> The above code gives me a 500 error:

Sounds like a server error if you are getting a 500 error. I'm not much of a .NET export so I can't help much, but it looks like it is trying to deseralise sEcho for some reason.

Allan

clint

Well, the strange thing is that I can make this call and get json back. This will actually return the json without any errors...its just that Datatables is empty.

[code]
"fnServerData": function(sSource, aoData, fnCallBack) {
$.ajax({
"type": "POST",
"url": sSource, //"test.aspx/DoProc",
"contentType": "application/json; charset=utf-8",
"data": '{"procName":"procGetAllContacts","parmsVals":"","procType":"Select"}',
"dataFilter": function(data) {
var msg = eval('(' + data + ')');
},
"error": AjaxFailed
});
},
...
[/code]

It returns this in the response.

[code]
{"d":"[{\"Code\":3,\"AddressID\":2,\"ContactType\":184,\

...
}]"}

[/code]

It seems I am so close. I just cant get both the data to return and the datatables to work at the same time.

timwilson

I know this post is a few months old, but just in case someone else comes across it with similar issues, see this post where I explain similar issues with a resolution:

http://datatables.net/forums/discussion/12601/passing-parameters-to-.ajax-asmx-web-service-using-post#Item_1