Ajax call with parameters

Ajax call with parameters

clintclint Posts: 15Questions: 0Answers: 0
edited July 2012 in DataTables 1.9
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.

Replies

  • SconesScones Posts: 6Questions: 0Answers: 0
    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.
  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin
    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
  • clintclint Posts: 15Questions: 0Answers: 0
    @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!
  • allanallan Posts: 63,397Questions: 1Answers: 10,451 Site admin
    > @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
  • clintclint Posts: 15Questions: 0Answers: 0
    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.
  • timwilsontimwilson Posts: 7Questions: 0Answers: 0
    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
This discussion has been closed.