No error but table is empty

spickens

I am a newbie with low javascript skills. For 8 hours I've tried to find the incantation that will display my table data using CHROME Version 65.0.3325.181 (Official Build) (64-bit). The application is asp.net. The web page is the child of a master page. A server-side [webmethod] that is a static method in the page's .ASPX creates the data for the client-side javascript. Many variations have been tried. The table headings, etc. display just fine, but instead of data rows the table says, "No data available in table." Does anyone know how to fix this?.

Here is the JSON data returned by the [webmethod] to populate the table

[
{
"ExamSeriesCode": "BB-AL",
"NoShow": 1,
"NDARefused": 1,
"Tested": 65
},
{
"ExamSeriesCode": "AA-AL",
"NoShow": 1,
"NDARefused": 0,
"Tested": 64
}
]

**Here is the web page*

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ChartTable.aspx.cs" Inherits="OperationalStats.Forms.ChartTable" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">


<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<script type = "text/javascript"> 
     $(document).ajaxError(function (event, xhr, options, exc) {
         alert(exc.toString());
    });

     $(document).ready(function () {
         $("#demoGrid").DataTable({

             "processing": true,   
             "clientSide": true,  
             "pageLength": 25,
             "paging": true,


             "ajax": {
                 "url": "ChartTable.aspx/LoadData",
                 "type": "POST",
                 "datatype": "json",
                 "error": "ajaxError",
                 "contentType": "application/json",
                 "dataSrc": "",
             },

             "columnDefs":
             [{
                 "targets": [0],
                 "visible": true,
                 "searchable": true
             },
             {
                 "targets": [1],
                 "searchable": true,
                 "orderable": true
             },
             {
                 "targets": [2],
                 "searchable": true,
                 "orderable": true
             },
             {
                 "targets": [3],
                 "searchable": true,
                 "orderable": true
             }],

             "columns": [
                 { "data": "ExamSeriesCode", "name": "ExamSeriesCode", "autoWidth": true },
                 { "data": "NoShow", "name": "NoShow", "autoWidth": true },
                 { "data": "NDARefused", "name": "NDARefused", "autoWidth": true },
                 { "data": "Tested", "name": "Tested", "autoWidth": true }
             ]
         });
     });
</script>  
<div class="container">  
    <br />  
    <div style="width:90%; margin:0 auto;">  
        <table id="demoGrid" class="table table-striped table-bordered dt-responsive nowrap" >  
            <thead>  
                <tr>  
                    <th>ExamSeriesCode</th>  
                    <th>NoShow</th>  
                    <th>NDARefused</th>  
                    <th>Tested</th>  
                </tr>  
            </thead>  
        </table>  
    </div>  
</div>

</asp:Content>

kthorngren

Looks like it should work. Can you post a link to your page for debugging? If no try collecting debug output and providing the resulting URL.

Kevin

spickens

I'm unsure if I did the right thing, but the code seems to be "ohuwly" Is that what you mean by resulting URL?

allan

Yes that looks correct, but http://debug.datatables.net/ohuwly is 404.

Could you try running it again please?

Allan

spickens

Ok. This time the code is uwoyob.

spickens

According to the debugger, this is the last JSON from the server. The data elements are correct. The payload should result in a table with only two rows.

{
"d": "[\r
{\r
\"ExamSeriesCode\": \"BB-AL\",\r
\"NoShow\": 1,\r
\"NDARefused\": 1,\r
\"Tested\": 65\r
},\r
{\r
\"ExamSeriesCode\": \"AA-AL\",\r
\"NoShow\": 1,\r
\"NDARefused\": 0,\r
\"Tested\": 64\r
}\r
]"
}

colin

This looks suspicious - "clientSide": true, , did you mean serverSide?

spickens

What looks suspicious about it? I'm not trying to be sharp with you; in truth i have no idea. At the moment there are only two rows being returned. clientSide processing ought to be able to handle two rows.

colin

clientSide isn't a valid option. Client-side processing is the default, which is toggled (server/client) by the serverSide option.

spickens

Now I see what you mean. I changed it to serverSide:false, but the change did not cause the proper operation, which you probably expected.

colin

Righty ho, it was worth a try. Allan and Kevin are on the thread - I'm sure with their experience they'll spot something that I'm missing!

kthorngren

It looks like you will want to change your dataSrc from "dataSrc": "", to "dataSrc": "d",. Your JSON data is in the object d:

{
"d": "[\r
{\r
\"ExamSeriesCode\": \"BB-AL\",\r
.......

Kevin

spickens

Well, I thought your answer was odd because my code didn't include a "d" So I looked around and found the article below, which explains why the "d" appears: it's a ASP.NET feature to prevent hacking. Maybe you knew that. Anyway, After changing dataSrc as you requested, the table is drawn (a great step!) but it is empty. Before drawing the empty table, the following error message is displayed twice: "DataTables warning: table id=demoGrid - Requested unknown parameter 'ExamSeriesCode' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4" Not sure what that tells me because as you can see ExamSeriesCode in the returned JSON response. Thoughts? If you want another debug, let me know. Thank you so much for your attention.

***** From https://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/ *****

The ASP.NET AJAX library uses the “d” parameter formatting for JSON data. This forces the data in the example to appear in the following form:

{“d” : [“bankaccountnumber”, “$1234.56”] }

Because this is not a valid JavaScript statement, it cannot be parsed and instantiated as a new object in JavaScript. This therefore prevents the cross-site scripting attack from accessing data from AJAX JSON services on other domains.

The Microsoft Ajax client libraries automatically strip the “d” out, but other client libraries, such as JQuery, would have to take the “d” property into account when using such services.

colin

This last problem is along the same lines, the MS response is adding in loads of backslashes that will mess with the JSON, so this needs to be cleansed before being passed to DataTables.

To do that, use ajax.dataSrc, the one you modified already for the "d", but replace that with this instead:

dataSrc: function ( json ) {
 return JSON.parse( json.d );
}

Hopefully that'll be the last hurdle to getting that data into the table.

spickens

By god, man. That's it!! You folks have been wonderful. Thank you ever so much.