0

I have a Ajax webmethod that needs to populate a JQuery table. The code i have produces no errors, but I don't see any data in my table.

Here is the WebMethod:

WebMethod call

here is the JSON Data being returned:

JSON results

This is currently being sent to a basic table like this :

Table layout

the end results are : empty display

Can someone point in the direction as to why no data is being shown please?

* EDIT *

Here is the method code which creates the JSON data. This is being called by the WebMethod, which returns a string

                 try
                {
                    rdr = cmd.ExecuteReader();
                    if (rdr.HasRows)
                    {
                        using (JsonWriter jsonwriter = new JsonTextWriter(sw))
                        {
                            jsonwriter.WriteStartArray();
                            int totalrecords = 0;
                            while (rdr.Read())
                            {
                                jsonwriter.WriteStartObject();
                                int fields = rdr.FieldCount;
                                for (int i = 0; i < fields; i++)
                                {
                                    jsonwriter.WritePropertyName(rdr.GetName(i));
                                    jsonwriter.WriteValue(rdr[i]);
                                }
                                jsonwriter.WriteEndObject();
                                totalrecords++;
                            }
                            jsonwriter.WriteEndArray();
                        }
                    }

Here is hte WebMethod:

    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public static string ApprovalInfo(string messageId)
    {
    string json = string.Empty;

    json = GetComments(messageId);

    return json;

    }

* EDIT * I've installed and run the DataTables debug program, which produces the following:

     "sAjaxDataProp": "[{\"UserName\":\"watherton\",\"EnteredDate\":\"2013-07-18T14:36:46.387    
      \",\"Comment\":\"some comment 2\"},{\"UserName\":\"watherton\",\"EnteredDate\":\"2013-07-
             18T16:12:41.753\",\"Comment\":\"some comment 3\"}]",
        "aoColumns": [{
        "mDataProp": "UserName"
         }, {
         "mDataProp": "EnteredDate"
         }, {
         "mDataProp": "Comment"
      }]

this doesn't look right to me. I've done a debug in Firebug, and the above stream of data is being returned in the response tab, the JSON tab looks different. So, i guess someplace I need to tell the WebMethod/AJax call to use the JSON not the response. perhaps?

CSharpNewBee
  • 1,951
  • 6
  • 28
  • 64
  • Saving time before i leave for the day. Does it make any difference? – CSharpNewBee Jul 22 '13 at 16:42
  • Does the `dataTable()` call work if you hard code some JSON data to it, like this: `{"UserName":"watherton", "EnteredDate":"2013-07-18", "Comment":"comment 1"}`? If not, then there is an issue with how you are providing your data to `dataTable`; otherwise it is an issue with how you ASP.NET AJAX Page Method is returning the JSON data. – Karl Anderson Jul 22 '13 at 16:50
  • So, i've created a Fiddle using the data i get back, and it works. But still no joy in the webpage http://jsfiddle.net/s8JmF/149/ – CSharpNewBee Jul 22 '13 at 19:13
  • What does the `JSON` tab of data look like? Also, could you post your `ApprovalInfo` page method code? – Karl Anderson Jul 22 '13 at 19:22
  • I'll get this out tomorrow now Karl. – CSharpNewBee Jul 22 '13 at 20:19

1 Answers1

0

Try to call fnDraw.

Example found on http://datatables.net/api

$(document).ready(function() {
  var oTable = $('#example').dataTable();

  // Re-draw the table - you wouldn't want to do it here, but it's an example :-)
  oTable.fnDraw();
} );

Also, try to use .done and .fail instead of success: and error: jQuery.ajax handling continue responses: "success:" vs ".done"?

If those suggestions don't help, try initializing the table with static data in your code on document.ready Then, in the ajax call, just do:

exampleTable.fnClearTable();
exampleTable.fnAddData(mydata);
exampleTable.fnDraw();
Community
  • 1
  • 1
Nullius
  • 2,607
  • 2
  • 16
  • 22