json is null intermittantly

pkboucher

Sometimes typing quickly into column-searches I get a null json (though logs from my server-side show a good json was returned).

More reliably, I can reproduce this by waiting about 5 minutes and then typing something into a column search.

I tried the delay plugin, but I must not have done it correctly (no discernable effect).

[code]




jQuery.fn.dataTableExt.oApi.fnSetFilteringDelay = function ( oSettings, iDelay ) {
/*
* Type: Plugin for DataTables (www.datatables.net) JQuery plugin.
* Name: dataTableExt.oApi.fnSetFilteringDelay
* Version: 2.2.1
* Description: Enables filtration delay for keeping the browser more
* responsive while searching for a longer keyword.
* Inputs: object:oSettings - dataTables settings object
* integer:iDelay - delay in miliseconds
* Returns: JQuery
* Usage: $('#example').dataTable().fnSetFilteringDelay(250);
* Requires: DataTables 1.6.0+
*
* Author: Zygimantas Berziunas (www.zygimantas.com) and Allan Jardine (v2)
* Created: 7/3/2009
* Language: Javascript
* License: GPL v2 or BSD 3 point style
* Contact: zygimantas.berziunas /AT\ hotmail.com
*/
var
_that = this,
iDelay = (typeof iDelay == 'undefined') ? 250 : iDelay;

this.each( function ( i ) {
$.fn.dataTableExt.iApiIndex = i;
var
$this = this,
oTimerId = null,
sPreviousSearch = null,
anControl = $( 'input', _that.fnSettings().aanFeatures.f );

anControl.unbind( 'keyup' ).bind( 'keyup', function() {
var $$this = $this;

if (sPreviousSearch === null || sPreviousSearch != anControl.val()) {
window.clearTimeout(oTimerId);
sPreviousSearch = anControl.val();
oTimerId = window.setTimeout(function() {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter( anControl.val() );
}, iDelay);
}
});

return this;
} );
return this;
}

var asInitVals = new Array();

$(document).ready(function() {
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
// "sDom": 'T<"clear">lfrtip', // kicks off the flash stuff
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'20'+
'50'+
'100'+
'1000'+
' records'
},
//"bStateSave": true, //does some weird and painful things with persisting search restrictions on columns but not saying/showing in the footer that it's doing so....'
"sPaginationType": "full_numbers",
"bFilter": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<%= contextPath%>/BankerController/doServerSide",
"aaSorting": [[ 20, "desc" ]],
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
// aoData.push( { "name": "makeXLS", "value": shouldIMakeXLS } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
// if (null == json){
// window.alert("got null json");
// }
fnCallback(json);
} );
}
} ).fnSetFilteringDelay(500);

//testing col search
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
[/code]

pkboucher

Additional info: when I do get a JSON back from the server, it works (and passed JSONLINT), and when it freezes up and says it has a null JSON, there's no server log message (meaning no request hit the server).

It appears that my server didn't return an invalid JSON, but instead, the jquery code tries to parse something (who knows what) that did not come from the server.

pkboucher

A colleague suggested I word my request for help like this:

Hi All,
We’re using server-side processing via fairly standard code, including the line:
"sAjaxSource": "/PCICS-TEST/BankerController/doServerSide",

It works as expected most of the time, but we’re getting an intermittent problem about 10% of the time where, when we add a character to a search/filter string, it hangs on ‘processing’ until we refresh the whole browser page. When I check it out in Chrome’s ‘inspect element’ tools, I see several symptoms of the failure:
1. it shows “Failed to load resource: doServerSide” (as used above in the sAjaxSource line) and
2. When we look at the elements we have something that looks like an XHR, (it has the expected Request URL, etc) but it isn’t actually doing the GET to the server.
3. During the hang, any further changes to the search textbox just continue to display the same failure: it isn’t frozen, it’s just caught in this bad-state, with all subsequent entries also triggering the above behavior. Refreshing the page makes the problem go away until next time.
When we add to the search/filter string and the problem DOESN’T happen, we’re getting the doServerSide resource loading without problems, and it is actually generating an XHR and getting a successful response from the server, etc…

Triggering the problem is not completely reproducible, but seems to happen most often when we either come back after a few minutes away and start search/filtering the table, or when we type rapidly in a search textbox.

Any guidance would be appreciated. I’d be happy to provide more sample code and/or data, but don’t even know what sort of additional info would be helpful at this point.

Thanks!

allan

Hi pkboucher,

What I would suggest is replacing the $.getJSON function you are using with $.ajax() and adding an "error" function to it. Here is an example showing the use of $.json - although not with an error function, which is easy enough to add - http://datatables.net/examples/server_side/post.html . In the error handler, you could try an get some information about why the error is occurring - or just log the fact that it has going into the error state - which is wrong in the first place. It would also be worth watching the Firebug console to see if any JS errors are reported.

Allan

pkboucher

I simplified the code and it still does the same thing.

If I type slowly and steadily in the column-searches, it works all day, but if I wait about 5 minutes and then type one more character, it freezes up almost every time.

[code]
var asInitVals = new Array();
var oTable;

$(document).ready(function() {
oTable = $('#example').dataTable( {
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'20'+
'50'+
'100'+
'1000'+
' records'
},
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "<%= controllerPath %>doServerSide",
"aaSorting": [[ 20, "desc" ]]
} );

//testing col search
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]

pkboucher

The firebug console shows this:
[code]
json is null
[Break On This Error] if ( typeof json.sEcho != 'undefined' )
[/code]
but since it never actually hit my server to get the json, I'm not surprised the json is null.

I will try using the ajax with error reporting.

pkboucher

I tried this and got the same behavior, and didn't get that 2nd alert (below):
[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback,
"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." );
} else {
alert( "DataTables warning: error " + error + " thrown " + thrown );
}
}
} );
}
[/code]

pkboucher

Just so you know, I upgraded my server to the latest glassfish, and the problem went away.

allan

Ah very interesting - that's good to hear :-). Thanks for the feedback.

Regards,
Allan