Ajax call with parameters
Ajax call with parameters
clint
Posts: 15Questions: 0Answers: 0
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.
[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.
This discussion has been closed.
Replies
[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.
> 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
[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!
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
[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.
http://datatables.net/forums/discussion/12601/passing-parameters-to-.ajax-asmx-web-service-using-post#Item_1