No error but table is empty

No error but table is empty

spickensspickens Posts: 24Questions: 7Answers: 0

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>

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 14,102Questions: 25Answers: 3,325

    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

  • spickensspickens Posts: 24Questions: 7Answers: 0

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

  • allanallan Posts: 54,886Questions: 1Answers: 8,603 Site admin

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

    Could you try running it again please?

    Allan

  • spickensspickens Posts: 24Questions: 7Answers: 0

    Ok. This time the code is uwoyob.

  • spickensspickens Posts: 24Questions: 7Answers: 0

    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
    ]"
    }

  • colincolin Posts: 12,897Questions: 0Answers: 2,199
    edited April 2018

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

  • spickensspickens Posts: 24Questions: 7Answers: 0

    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.

  • colincolin Posts: 12,897Questions: 0Answers: 2,199

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

  • spickensspickens Posts: 24Questions: 7Answers: 0

    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.

  • colincolin Posts: 12,897Questions: 0Answers: 2,199

    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!

  • kthorngrenkthorngren Posts: 14,102Questions: 25Answers: 3,325

    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

  • spickensspickens Posts: 24Questions: 7Answers: 0
    edited April 2018

    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.

  • colincolin Posts: 12,897Questions: 0Answers: 2,199
    Answer ✓

    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.

  • spickensspickens Posts: 24Questions: 7Answers: 0

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

This discussion has been closed.