Page stuck on "Processing..."

jspicher

Hi Guys!

I'm pretty new to the DataTables software, it looks fantastic thanks to all involved!
I was able to install the script on my server and get it working with the sample sql database, however when l turn it over to my own database and alter the initial table the page gets stuck on "Processing..." when l open it.

Here's a .txt example of my json output: http://theworldphotos.com/json_output.txt
It validates in jsonlint so l'm not quite sure what's wrong here.

Here's my Datatable init tags:
[code]

$(document).ready(function() {
$('#gallery_data').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "datatables/server_processing.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers"

} );
} );

[/code]

and here's my basic on page table:
[code]



ID
Title
Pub Date
Category
Status
Edit
Reorder
New Photos
Delete




Loading data from server




ID
Title
Pub Date
Category
Status
Edit
Reorder
New Photos
Delete



[/code]

Can anyone help push me in the right direction with this? I've got a ton of projects that DataTables would be PERFECT for, but l can't seem to get it working ;)

Thanks guys!

aallord

I have the same problem as above.

[code]
$(document).ready(function() {
//document.srchForm.srchFor.focus();
$("#obitBody").load("http://genealogyinfo.us/phpScripts/obitList.php");
$('#obitTable').dataTable({
'bProcessing': true,
'bServerSide': true,
'sPaginationType': 'full_numbers',
'sAjaxSource': 'http://genealogyinfo.us/phpScripts/obitList.php'
});
//$('#obitTable').dataTable();
});
[/code]

When I comment out the 'bServerSide': true the information loads as expected, but nothing is active nor can be changed.

This is the php page
[code]



First Name
Last Name
Date Published
Publication Name




Loading Data From Server




First Name
Last Name
Date Published
Publication Name



[/code]

And the PHP Script that runs

I have checked the output format to confirm the return is valid json, which does pass testing.

You can see the results at http://genealogyinfo.us and select Obituaries/Obituary Search.

Any help in this area would be greatly appreciated.

jlf

I have the same problem.
The json file is generated and sent back to the browser, but datatables isn't triggered to update the table.

The problem seems to be "almost" random. Some times, the table is properly displayed, and when I play with the search field, I get different results. Typing 1 letter will trigger the refresh, but two not and three will trigger it again.

I say almost random because I can't find any rule to explain why it doesn't work, but when a case works one, it will always work.

[code]
oTable = $('#race_list').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/ajaxcalendar.json",
"sPaginationType": "full_numbers",
"oLanguage": {
"sLengthMenu": $("#sLengthMenu").text(),
"sZeroRecords": $("#sZeroRecords").text(),
"sInfo": $("#sInfo").text(),
"sInfoEmtpy": $("#sInfoEmtpy").text(),
"sSearch": $("#sSearch").text(),
"sInfoFiltered": $("#sInfoFiltered").text(),
"sProcessing": $("#sProcessing").text(),
"oPaginate": {
"sFirst": $("#sFirst").text(),
"sLast": $("#sLast").text(),
"sNext": $("#sNext").text(),
"sPrevious": $("#sPrevious").text()
}
},
"aoColumns": [
{ "sWidth": "300px" , "sType": "string"},
{ "sWidth": "60px" , "sType": curFormat, "fnRender": function ( oObj ) {
if (lang='en') {return $.format.date(oObj.aData[1]+ " 00:00:00", "MM/dd/yyyy");} else {return $.format.date(oObj.aData[1]+ " 00:00:00", "dd/MM/yyyy");}}},
{ "sType": "string"},
{ "sType": "string"},
{ "sType": "string"}
],
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}
} );
[code]

The "success" function is indeed called (I checked), but the table isn't refreshed.
I tried removing the fnServerData, the problem remains.

I event minimized the code to
[code]
oTable = $('#race_list').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/ajaxcalendar.json"
} );
[/code]
The problem remains...

I thought that the problem may be data related so I managed to have the server send the same ajaxcalendar.json file, what ever the request. the table is initialized, but when I click the next page button twice, the table is stuck.
So it isn't data related.

I tried on Safari, Firefox and Chrome, the problem is the same on all tested browers.

I don't know what else I can do to debug this.

Thanks

allan

Wow - three with the same issue... how odd! Does the return from the server always pass http://jsonlint.com ? If it doesn't then that's why it's not working - and this is normally the cause of this issue. It's worth firing up Firebug (or whatever) grabbing the return from your XHR and running it through json lint. If that doesn't work, please post back - ideally with a link to the page showing the problem1

Allan

jlf

Thank you allan.
The last thing I didn't check was the validity of the json file.
At that was the problem. I was escaping quotes when generating the file.
This is why the problem seemed to be random.

Thank you for taking the time to help.

Datatables & allan rock ! ;-)

aallord

Hey Allan,

As I explained in my comment about continuing to get the "Processing" without data ever being returned; this happens when 'bServerside': true, if I code 'bServerSide': false, the json loads fine.

The link to the php page is http://genealogyinfo.us/phpScripts/obitList.php the output has been copied directly into http://jsonlint.com and clearly indicates the output is valid JSON.

Going to http://genealogyinfo.us and selecting the menu option "Obituaries/Obituary Search" will show the table loading but currently 'bServerSide': false, is the setting. Again, when setting 'bServerSide': true, then I simply get "Processing" as a result.

If I load the entire 10,000 records the resulting JSON loads fine along with sorting and pagination working correctly. Of course with a 10,000 record table this loading takes a bit too long to be acceptable and this table grows about 500 records a week.

I do appreciate your help in this situation and I am quite impressed with datatables and its usefulness. I have several uses for such features but need to resolve what is happening when 'bServerSide': true, breaks the scripts from working.

Again thank you.

allan

Hi aallord,

I suspect you've got the next two most common issues with server-side processing after invalid JSON. :-)

1. Is sEcho being returned back to DataTables (it should be parsed as an int for security)? Doesn't look like it at the moment.

2. "iTotalDisplayRecords": 10 looks wrong to me. This is the total number of records in the result set after filtering - not what is shown only on this page. So without a filter it should match "iTotalRecords": http://datatables.net/usage/server-side

Regards,
Allan

aallord

Allan,

After making some corrections based on what you shared above here is the output:

[code]
{"sEcho": 0, "iTotalRecords": 10088, "iTotalDisplayRecords": 10088, "aaData": [ ["Edna","Aavang", "01/26/2010", "Stevens Point WI"],["Luigi","Abbate", "12/06/2009", "Chicago IL"],["Doris","Abbate", "02/14/2010", "Chicago IL"],["Joseph","Abbatiello", "02/14/2010", "Chicago IL"],["Stanley","Abbott", "02/16/2010", "Butte MT"],["Charles","Abbott", "01/19/2010", "Saint Paul MN"],["James","Abdella", "01/04/0010", "Saint Paul MN"],["Carol","Abern", "11/13/2009", "Chicago IL"],["James","Abernethy", "12/16/2009", "Chicago IL"],["Gabriel","Abitbol", "12/28/2009", "Chicago IL"]]}
[/code]

Here is the php code generating the above results
[code]
$sQ = "SELECT * FROM obits";
$numSet = mysql_query($sQ);
$iTotal = mysql_num_rows($numSet);

#Paging
if(isset($_GET['iDisplayStart'])){
$sLimit = "LIMIT ".mysql_real_escape_string($_GET['iDisplayStart']).", ".mysql_real_escape_string($_GET['iDisplayLength']);
$filterLimit = mysql_real_escape_string($_GET['iDisplayLength']);
} else {
$sLimit = "LIMIT 0, 10";
$filterLimit = $iTotal;
}
#Ordering
if(isset($_GET['iSortCol_0'])){
$sOrder = "ORDER BY ";
for($i=0; $i

allan

It looks okay to be on a quick pass. Although I just loaded up your site to try and get a little more information and it's giving me "Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in ... on line 50

{"sEcho": 1, "iTotalRecords": 10088, "iTotalDisplayRecords": 10, "aaData": []}"

So something 'funky' happening somewhere... It certainly looks like you want bServerSide set to true. Do you get a JS error when it's working and the JSON is valid?

Allan

jspicher

Cool thanks everyone l was able to get my tables working by trying some of the techinques mentioned by other users and by you Allan thank you.

I have a question - if l have fields that could have special characters (like quotes, or double quotes) for example that could potentially break the json output what is the best way to fix them? I'm using htmlspecialchars() - http://php.net/manual/en/function.htmlspecialchars.php currently but if there is a better method please let me know!

Regards,

aallord

I loaded just fine getting results on the http://genealogyinfo.us/phpScripts/obitList.php and getting "Processing..." on the actual page.

I load this data table using a JQuery xhttp request and putting the results into a div tag, could this be causing problems with your plugin scripting?

markevans

Having a similar issue with a JSON, but I'm sure my problem more basic than the others listed here - I'm probably far less advanced. Regardless, in diagnosing I've tried to make an example as completely simple and like the provided example as possible. Basically, it is the example without the CSS import statements near the top. I've pasted it in. It doesn't work. I get "processing". In firebug, it looks like the data is null. The JSON loads fine when I do it separately. I've included the full page below. Hoping this can help me with a project I'm working on. Looks like great potential. Any help is much appreciated on why basic result below might not be working.

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">





DataTables example




$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": 'http://datatables.net/examples/examples_support/json_source.txt'
} );
} );





DataTables AJAX source example



Preamble
Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the aData initialisation parameter which takes an array of data, or using the sAjaxSource initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.


Live example




Rendering engine
Browser
Platform(s)

Engine version
CSS grade








Rendering engine
Browser
Platform(s)
Engine version
CSS grade








Initialisation code
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": '../examples_support/json_source.txt'
} );
} );


Other examples
Basic initialisation





Advanced initialisation



Data sources



Server-side processing




API



Plug-ins




Please refer to the DataTables documentation for full information about its API properties and methods.




DataTables © Allan Jardine 2008-2010




[/code]

markevans

I should also note that I can get the 'zero configuration' example to work ok, but the JSON example just won't complete. This is true of my own JSON and the example as noted above. I've checked my JSON in jsonlint and it checks out fine (and obviously, the example page is fine.) I'm sorry if this is something elementary - was using Google table visualization but unhappy with flexibility and this seemed like a good option. Many thanks.

aallord

I discover the problem with receiving "Processing..." while setting 'bServerSide': true;

The problem occurs with the example shown where the code is as follows:
[code]
/* Paging */
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}

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

allan

@aallord - nice one. Thanks for that. I had thought that the multi-line string I use to create the SQL query would take care of this - slightly odd that it hasn't. But thanks for letting us know what the issue was - I'll have a closer look at my own script.

@jspicher: This is exactly what that function is meant for :-). Using it looks right to me.

@markevans: Struggling to follow the issue slightly. Do you have an example you can post showing the problem?

Allan

codingavenue

Hi Allan!

I had experience this one earlier. Note that the JSON data is valid and the sEcho variable is included on the data passed from the server.

Here's what I notice, each time the server passes a NULL data back to DataTables this behavior happens. So right now what Im doing is to supply an empty string if the data is NULL. Could you confirm that this is a DataTables behavior, that the server shouldn't pass NULL values?

CodingAvenue

pktm

Hi all!

While quickly scanning through the above posts, I recognize a bug in the PHP server side script I figured out last week. The json returned is not valid, causing DataTables getting stuck with the "Processing..." message.

It's caused by the addslashes() method, that adds slashes where they are not allowed in JSON.
You can either escape the database strings yourself or try to use json_encode(). Unfortunately, the latter will probably not work well with utf8 encoded strings containing special chars like french umlaut (e.g.