Server side processing hangs at "Loading data from server"

JamesFu

I'm pretty new to JQuery and DataTables and any help is much appreciated.

I edited the Server Side Processing php file for my application and when I tried to load the page, table hangs at the "Loading data from server" stage. Interestingly, when I loaded the php file and copied the JSON response to a text file and made that the sAjaxSource, the table displayed correctly.

My first thought was that the php page might need to somehow indicate "end of file" but this wasn't in the example. Anyone facing this problem too?

Here's my php code:

[code]<?php
require_once('connect.php');
if (checkSession() != 0) {
echo "0";
} else if (dbConnect()) {

/* Paging */
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' ) {
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".mysql_real_escape_string( $_GET['iDisplayLength'] );
}

/* Ordering */
$sOrder = "";
if ( isset( $_GET['iSortCol_0'] ) ) {
$sOrder = "ORDER BY ";
for ( $i=0 ; $i[/code]

allan

Hi JamesFu,

I don't see anything immediately wrong with your PHP there, so what I would suggest is to get your JSON return from the server (using Firebug or whatever) and pass it through http://jsonlint.com to see what might be happening with it's parsing. I suspect that there will just be a little error in there - although I can't see where from the code!

Regards,
Allan

JamesFu

Hey Allan,

Thanks for the suggestion. Jsonlint said the JSON return was valid. Also, like I mentioned earlier, I've tried to save the JSON return as a text file and using that as the sAjaxSource and it worked fine. Shall go through my codes with a fine tooth comb again, thanks!

James

allan

Hi James,

Interesting one! If the JSON is valid, but DataTables is getting stuck, then it sounds like you are hitting a Javascript error somewhere. Is there anything in the Javascript console which might indicate that?

Regards,
Allan

henseler

Last post was some time ago but perhaps still relevant to add that I experience the same problem with comparable php code (the example template) but it only occurs with Chrome (5.0.375.55 beta). Firefox and Opera work fine. IE6 under wine (I cannot test IE7 and 8 on my Linux localhost) protests a bit but in the end also displays my date.

Let me know if it is necessary to add the code.

Timmo

davidhorat

I have the same problem but using Django and Python. JSON is valid and DataTables in Firefox 3.5 accepts it, but in Google Chrome 5 DataTables fails. Any clues?

allan

I've just tried this page ( http://datatables.net/examples/data_sources/server_side.html ) in Chrome 5, and it seems to work no problem. Could someone post a link to an example which doesn't work in Chrome - it would be useful to see what is going on with the Inspector.

Allan

JCii

Allan,

I have datatables 1.7.6 with ASP.NET MVC3 as the backend framework. Datatables is hanging on me as well. jsonlint says that the response is valid, and I have it pull using the same GET that is hanging datatables (using firebug to access the GET).

I have to datatables objects on the page. One manages a table of parent records. The 2nd manages a table of child records. I use events to trigger an fnFilter on a specific column.

All of this works, initially. If I reload the page and keep clicking, everything works. If I walk away for 60 seconds or so and try and use the child datatable, it hangs. When I look at Firebug, I see it requesting and just hanging on the response.

This may well be a framework problem, but what can I do from the client/datatables side to verify that?

Thanks

-Jimmy

[EDIT}
I can also provide a URL (in email) if someone wants to see this problem firsthand.

allan

It sounds like you already have verified that it is an issue with the server-side, if Firebug is just showing the XHR as still in progress, at which point you would need to look at the server error logs etc. If there is however a response from the server and the XHR completes, but the table is not populated, then it is very likely to be a JSON error. You can pass your json through http://jsonlint.com to check it.

Allan

miqu

I have the same problem as described above. I tried the versions 1.7.6 and 1.8 beta 3. The problem occurs in Firefox 4.0.1, Cromium 11.0 and Opera 11.10. Always the same issue: inside the table: 'Loading data from server'. The json data is loaded correctly. Even when I click on the table heads (sorting) it reloads a new json file. But it do not show it. There are no errors in the js console.

Do you have any ideas?

miqu

Solved!

Before I tried it as described everywhere with the three parameters:
[code]
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "http://localhost:3000/clients.json"
} );
[/code]
which didn't work.

Then I removed the second param

[code]
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "http://localhost:3000/clients.json"
} );
[/code]

and now it's working! Could this be a bug?

Cheers miqu

jocapc

Hi,

Removing bServerSide will change behaviour of the table because without this parameter DataTables will load everything at once and process data on the client side, and with bServerProcessing DataTabls will make Ajax calls each time something happens on the client-side. You have just stoped DataTable to make additional calls but this does not resolve your problem if you want standard server-side processing.

One possibe issue - are you returning in the sEcho the same value that is sent from the datatables? In the first example in this thread in the code is hardcoded value "sEcho": 123 I think tha this woud not work if you made similar error.

And note for Jimmy (if he still reading this). You have example of the two tables connected in parnt-child manner on the http://www.codeproject.com/KB/aspnet/Parent-Child-DataTables.aspx with ASP.NET MVC3 code.

miqu

Thanks a lot jocapc,

I found out after a very short while, that my "solution" isn't really one. But the hint with the sEcho solved my problem. I thought I studied the docs and examples thousend times searching the missing link, but I must have overread this.

Thank you again! miqu

wellson

Allan,

I am having the same problem, the application is working in Visual Studio 2010 IDE when I ran it and rendered in IE9, but after I moved to windows 2008 server, IE 9 can't display the data, it is showing 'loading data from server', however, if I used, Firefox 4, the application worked. I used the http://jsonlint.com to check the JSON, it is valid. any idea? the following is part of code in the code behind.

var cnt = UserRoles.GetRolesCount(sSearch);

var formatedList = new
{
sEcho = echo,
iTotalRecords = cnt,
iTotalDisplayRecords = cnt,
aaData = aaList
};

var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
var json = serializer.Serialize(formatedList);

return json;

allan

Can you give us a link please? Most likely you are getting a Javascript error - what is the error?

Allan

wellson

this is intranet and there is no error, the page is stuck at "Processing" , no data is displayed in IE9, but if I run in Firefox, the data displayed. however, if I run from visual studio 2010 IDE, it works in IE9. Firebug did not reported any error, the JSON is valid too.

wellson

This is the view page source info.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Master Page




{
overrideConsole: false,
startInNewWindow: true,
startOpened: true,
enableTrace: true
}














 
User ID
App ID
Role Name
Supervisor?





Loading data from server




 
User ID
App ID
Role Name
Supervisor?









var oTable;
var tableId = 'tbl';
var ws_GetData = 'IEUser.aspx/GetUserData';

var isShowGrid = 1;

$().ready(function () {

if(isShowGrid == "0")
{
$('#' + tableId).css("display","none");
return;
}

oTable = $('#' + tableId).dataTable({
"oLanguage": { "sSearch": "Search User ID:" },
'sPaginationType': 'full_numbers',
"sScrollY": "358px",
'bPaginate': true,
'iDisplayLength': 10,
'bProcessing': true,
'bFilter': true,
'bServerSide': true,
"aoColumns": [{ "bVisible": false},null,null, null, null],
'sAjaxSource': ws_GetData,
"fnServerData": function (sSource, aoData, fnCallback) { GrabData(sSource, aoData, fnCallback); }
});

$('#' + tableId + ' tbody tr').live('click', function () {

$(oTable.fnSettings().aoData).each(function () { $(this.nTr).removeClass('row_selected'); });

$(this).addClass('row_selected');

});

});


//-------------------------------------------------
function GrabData(sSource, aoData, fnCallback) {
$.ajax({
type: "GET",
url: sSource,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: aoData,
success: function (result) {
var myObject = JSON.parse(result.d);

fnCallback(myObject);
},
error: function (errMsg) {
alert(errMsg);
}
});

}

//--------------------------------------------------------------------------

allan

I don't think I'll be able to help too much in this case since you say it's working in Firebug and IE9 in the IDE, but not IE9 standalone and I can't see what is actually happening. I'm afraid I've no idea what would cause that - possibly a cross-site scripting issue? Do you see the data coming back in the XHR - that seems like the best place to start.

Allan

wellson

could you explain what is XHR? I am new to jquery and this is my first jquery app

thanks

allan

XHR - http://en.wikipedia.org/wiki/XMLHttpRequest (i.e. the Ajax request). The key thing here is to know what is being sent back to the browser from the client. You might want to look at using Firebug-Lite for IE or getting to grips with the IE developer tools.

Allan

wellson

Problem solved, the problem is JSON.parse doesn't work in IE 9, I have to include json2.js.


Thanks,

hksd

hi Welsson,

just include the script in head html tag ?