fnServerData in Internet Explorer 9+

mmcshane

We are trying to load table data with an AJAX call to a Java server. This has been working completely fine over the last few years with the following:

[code]
$("#dataTable").dataTable(
{
"bServerSide" : true,
"sAjaxSource" : "SafeServ?controllerId=ContractorCompanyController&methodId=getContractorCompanyData",
"bProcessing" : true,
"bPaginate" : true,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"iDisplayLength" : 50,
"aoColumns" : [ {
"sClass" : "nowrap-col",
"fnRender" : function(oObj) {
return oObj.aData[0];
}
}, // Name
{
"fnRender" : function(oObj) {
return oObj.aData[1];
}
}, // MSHA Id Number
{
"fnRender" : function(oObj) {
return oObj.aData[2];
}
}, // Contact Name
{
"fnRender" : function(oObj) {
return oObj.aData[3];
}
}, // Site Contact Name
{
"fnRender" : function(oObj) {
return oObj.aData[4];
}
}, // Secondary Site Contact Name
{
"fnRender" : function(oObj) {
return oObj.aData[5];
}
}, // Office Phone
{
"fnRender" : function(oObj) {
return oObj.aData[6];
}
}, // Cell Phone
{
"fnRender" : function(oObj) {
return oObj.aData[7];
}
}, // Fax
{
"fnRender" : function(oObj) {
return oObj.aData[8];
}
}, // Email
{
"fnRender" : function(oObj) {
return oObj.aData[9];
}
}, // Nature Of Business
{
"fnRender" : function(oObj) {
return oObj.aData[10];
}
}, // Contractor Type
{
"fnRender" : function(oObj) {
return oObj.aData[11];
}
}, // Location Of Work
{
"fnRender" : function(oObj) {
return oObj.aData[12];
}
}, // Addtional Info
{
"sClass" : "center-col",
"bSortable" : false
} // Edit
]
});
[/code]

Now we want to catch errors on the server and display a friendly end user error message so we added the following:

[code]
"fnServerData": function(sSource, aoData, fnCallback){
$.ajax({
"datatype": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": function(json){
if (json.error == true){
console.log("error");
alert("Sorry, the server encountered an error.\nIT Support has been notified.");
}
else
console.log("success");

fnCallback(json);
}
});
},
[/code]

The response from the server is:
[code]
{"iTotalRecords":760,"error":false,"sEcho":"1","aaData":,"iTotalDisplayRecords":760}
[/code]

THE PROBLEM:
This works perfectly in chrome, but in internet explorer 9 and 11 for only SOME of our users the table gets stuck with the "processing" label and displays none of our data.

We got the same results when we subbed in $.getJSON. We think it may have something to do with caching in IE, but any help is appreciated.

Using datatables 1.9.4 (error also happened in 1.8.2)
Using jquery 1.10.2 (error also happened in 1.6.2)

Relevant front-end code: http://jsfiddle.net/Wh6Ba/3/
Let me know if you need anything else and thanks in advance.

allan

Try adding an `error` handler function to your ajax call. Perhaps it is dropping into that?

Allan

mmcshane

I appreciate the suggestion. We thought things were getting stuck inside fnCallback, but it turns out the error was happening before that, possibly in console.log. The error is still somewhat of a mystery, but we've figured out a way to refactor around it.

Thanks for the great product!

drivaz

Hi,
mmcshane: What was your solution to this?

We're experiencing the same kind of behaviour. Only one person (using IE 11) has reported about this so far, but we are unable to reproduce the situation.