Datatables.net AJAX is not working - why?

Question

1.00/5 (2 votes)

See more:

The code I commented is not working. It failed on error: function.... why?
I ended up to use loadData() the work around function to do the task.

Can someone please tell what is wrong with it (the non working code)?

I can publish more code if you need more...

Thanks.
-------

    <script type="text/javascript">
        $(document).ready(function () {
            loadData();
        });
// What is wrong with the code?
        //$(document).ready(function () {
            //var refDataTable = $("#example").dataTable({
            //    processing: true,
            //    serverSide: true,
            //    ajax: {                   
            //        data: '{}',
            //        type: "POST",
            //        url: "BolAddress.aspx/GetAddress",
            //        contentType: "application/json; charset=utf-8",
            //        dataType: "json",
            //        success: function (response) {
            //            alert(response.d);                      
            //        },
            //        failure: function (response) {
            //            alert(response.d);
            //        },
            //        error: function (response) {
            //            alert(response.d);
            //        }
            //    },
            //    columns: [
            //        { data: "CardId" },
            //        { data: "CardType" },
            //        { data: "Company" },
            //        { data: "Address" },
            //        { data: "City" },
            //        { data: "State" },
            //        { data: "Zip" },
            //        { data: "Phone" },
            //        { data: "Contact" },
            //        { data: "Description" }
            //    ]
            //})
        //});
// ------------------------------------------
        function loadData() {
            $.ajax({
                type: "POST",
                url: "BolAddress.aspx/GetAddress",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    OnSuccess(response);
                },
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        };
        function OnSuccess(response) {
            var cards = response.d;
            var cardtable = $("#example");
            $(cards).each(function () {
                var row = $("<tr />");
                cardtable.append(row);
                row.append($("<td>" + this.CardId + "</td>"));
                row.append($("<td>" + this.CardType + "</td>"));
                row.append($("<td>" + this.Company + "</td>"));
                row.append($("<td>" + this.Address + "</d>"));
                row.append($("<td>" + this.City + "</td>"));
                row.append($("<td>" + this.State + "</td>"));
                row.append($("<td>" + this.Zip + "</td>"));
                row.append($("<td>" + this.Phone + "</td>"));
                row.append($("<td>" + this.Contact + "</td>"));
                row.append($("<td>" + this.Description + "</td>"));
            });
            var refDataTable = $("#example").dataTable();
        }
    </script>

What I have tried:

It is not working no matter what. It failed on 'error:' and alert me response.d.

Posted 21-Jun-17 13:55pm

Member 359326

Updated 22-Jun-17 8:41am

v2

Add a Solution

Comments

Patrice T 21-Jun-17 20:16pm

And you plan to tell us the exact error message and position or we have to guess ?

Member 359326 22-Jun-17 13:46pm

Thank you for looking into this matter. I appreciated very much.

the error is:Invalid JSON primitive from the logic
error: function (response) {
alert(response.d);
}
It says {\"Message\":\"Invalid JSON primitive:... in the debugger.

The issue is to do with data:'{}' and serverside: true. I did change them to data:{} and bserverside: true then I got it works partially.

It loads the data from service side but datatables.net doesn't load them automatically.

Here is the second version of this code.

===============================
$(document).ready(function () {
var refDataTable = $("#example").dataTable({
processing: true,
bserverSide: true,
ajax: {
data: {},
type: "POST",
url: "BolAddress.aspx/GetAddress",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.responseText);
}
},
"columns": [
{ "data": "CardId" },
{ "data": "CardType" },
{ "data": "Company" },
{ "data": "Address" },
{ "data": "City" },
{ "data": "State" },
{ "data": "Zip" },
{ "data": "Phone" },
{ "data": "Contact" },
{ "data": "Description" }
]
})
});

and I have to load data manually to datatables but it is not working correctly.
function OnSuccess(response) {
var cards = response.d;
var cardtable = $("#example");
$(cards).each(function () {
var row = $("");
cardtable.append(row);
row.append($("" + this.CardId + ""));
row.append($("" + this.CardType + ""));
row.append($("" + this.Company + ""));
row.append($("" + this.Address + ""));
row.append($("" + this.City + ""));
row.append($("" + this.State + ""));
row.append($("" + this.Zip + ""));
row.append($("" + this.Phone + ""));
row.append($("" + this.Contact + ""));
row.append($("" + this.Description + ""));
});
var refDataTable = $("#example").dataTable();
}

ZurdoDev 22-Jun-17 7:50am

1. You tagged this question as C, but clearly it is not C, it is JavaScript. Please correct that.
2. You said, "It failed on error: function.... why?" How would we know? Uncomment the code, run it, get the error and the exact line that causes the error and then someone can help. The error will tell you what is happening.

Member 359326 22-Jun-17 13:44pm

This is my first time that I post my issue here. I will try to fix.

Member 359326 22-Jun-17 13:46pm

I look around... I don't see any links I can change it.:(

Member 359326 22-Jun-17 13:47pm

I look around... I don't see any links to change the category...:(.

ZurdoDev 22-Jun-17 14:00pm

Click Improve question

Patrice T 22-Jun-17 14:02pm

Use Improve question to update your question.
So that everyone can pay attention to this information.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 359326 · Answer 1 · 2017-06-22T08:41:00

I got it to work finally. The missing part from my previous code is the 'dataSrc'. I have to tell datatables.net to load data from response.d which the data from server.

Thanks for looking at this issue.

$(document).ready(function () {
     var refDataTable = $("#example").dataTable({
         processing: true,
         bserverSide: true,
         ajax: {
             data: {},
             type: "POST",
             url: "BolAddress.aspx/GetAddress",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             // need to tell DataTables.net to load server data from response.d (asp.net List(of Address)).
             dataSrc: function (response) {
                 return response.d;
             },
             // no need --
             //success: OnSuccess,
             failure: function (response) {
                 alert(response.d);
             },
             error: function (response) {
                 alert(response.responseText);
             }
         },
         "columns": [
             { "data": "CardId" },
             { "data": "CardType" },
             { "data": "Company" },
             { "data": "Address" },
             { "data": "City" },
             { "data": "State" },
             { "data": "Zip" },
             { "data": "Phone" },
             { "data": "Contact" },
             { "data": "Description" }
         ]
     })
 });