Couple Questions - JSON and sAjaxSource

jbad

Still working to integrate DataTables into my project (asp.net). I'm trying to use an asp.net webservice as the sAjaxSource and have confirmed that the JSON it outputs is correct using this jQuery call:
[code] $.ajax({
type: "POST",
url: "/Pages/Testing/testService.asmx/getGridJSON",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
$('#example').dataTable({
"aaData": eval(data.d)
});
}
});[/code]

However, the following dataTable call using sAjaxSource doesn't work (using breakpoints, the webservice is never hit):
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sAjaxSource": '/Pages/Testing/testService.asmx/getGridJSON'
} );
} );
[/code]

What is the difference here? It would be great if I could reload the grid with the JSON using the first method (and keep sorting/etc.) as an alternative to getting sAjaxSource to work.

Any and all help is appreciated. I'd like to work datatables.net into an asp.net user control that can be used multiple times per page. Getting the reload (or load for that matter) to work is just a first step...

jbad

Answering my own question here. It looks like asp.net web methods and web services expect JSON POST input (http://www.code-magazine.com/Article.aspx?quickid=0906031) - of which the $.getJSON method isn't capable of.

So...time to keep digging to see how hard it would be to change the $.getJSON to a $.ajax call for this project. Perhaps there is a way to reload from the JSON data as in example 1 above instead?

jbad

It's late and I won't be able to test until tomorrow evening, but here's a modified version of fnReloadAjax that /should/ work with a new json source. Untested, but somebody may find it useful.

[code]
$.fn.dataTableExt.oApi.fnReloadJSON = function ( oSettings, json, fnCallback )
{
this.fnClearTable( this );
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;

/* Add the data to the table */
for ( var i=0 ; i

allan

Hi jbad,

You are quite right, DataTables will use $.getJSON() which will send a GET request to the server. I might look at abstracting that out, rather like I have done for the server-side data get of data in a new release. The way I was expecting people to do a POST at initialisation time was to use $.ajax() themselves and then initialise DataTables using the aaData data source method, based on the return from the server.

Having said that, it doesn't look like you are actually sending any data to the server, so I'm not sure what different POST and GET will make. Surely ASP web-services don't require POST requests, even on empty data sets?

Regards,
Allan

webdad3

Allan,

How can I load the JSON data as jbad initially tried to do? I am calling a webservice that is returning JSON data. I would like to load the datatable with that data.

Thanks,

Jeff

Karthik

jbad your approach doesn't involve sAjaxSource though. So is it really using server side processing for pagination etc?

allan

@Karthik - The original thread, and last post from jbad was back in 2009. I'm not sure if jbad is still visiting the forum... :-)

Allan

TheSpy

I came up with the following solution in version 1.7.6
I've added a property

[code]"contentType": "application/json; charset=utf-8",[/code]

in
[code]
this.fnServerData = function (url, data, callback) {
$.ajax({
"url": url,
"data": data,
"success": callback,
"dataType": "json",
"cache": false,
"error": function (xhr, error, thrown) {
if (error == "parsererror") {
alert("DataTables warning: JSON data from server could not be parsed. " +
"This is caused by a JSON formatting error.");
}
}
});
};
[/code]

so now it looks
[code]
this.fnServerData = function (url, data, callback) {
$.ajax({
"url": url,
"data": data,
"success": callback,
"contentType": "application/json; charset=utf-8",
"dataType": "json",
"cache": false,
"error": function (xhr, error, thrown) {
if (error == "parsererror") {
alert("DataTables warning: JSON data from server could not be parsed. " +
"This is caused by a JSON formatting error.");
}
}
});
};
[/code]
and after
[code]
/* if there is an ajax source load the data */
if (oSettings.sAjaxSource !== null && !oSettings.oFeatures.bServerSide) {
oSettings.fnServerData.call(oSettings.oInstance, oSettings.sAjaxSource, [], function (json) {
[/code]

I added:
[code]
if (json.hasOwnProperty("d"))
json = JSON.parse(json.d);
[/code]

Hope it helps,
Julius Bartkus

TheSpy

Another solution is to use WCF 4 http://msdn.microsoft.com/en-us/library/ee354381.aspx
seems that in WCF services do not wrap the response into D.

But still in any case would be nice to have

[code]"contentType": "application/json; charset=utf-8",[/code]

by default, as DataTables always expect Json formated response.

What do you think?

/Julius Bartkus