need to display "Processing" on details view

mstone42

Taking our lead from your http://datatables.net/examples/server_side/row_details.html page, we are using server-side processing for both the initial data pull as well as the details. The latter uses $.ajax (in the fnOpenClose function) to fetch the details data, based on data from the parent row. We'd like to be able to leverage the already existing functionality to show/hide the "Processing..." message, but since the '_fnProcessingDisplay' function is private, I'm accessing the '.dataTables_processing' div directly, but the div never displays. Is there a way to make this work?

Here's the function:
[code]
function fnOpenCloseProduct ( oSettings ) {

$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {

var nTr = this.parentNode.parentNode;

if ( this.src.match('details_close') ) {
this.src = "./images/details_open.png";
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );

} else { /* Open this row */

this.src = "../images/details_close.png";

var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
var pid = aData[1];

// show the Processing... message
$(".dataTables_processing").show();

$.ajax({
"url": "productSubView.php",
"dataType": "json",
"cache": false,
"data": getPHPPageVariables("array"),
"error":function (xhr, ajaxOptions, thrownError){
if(typeof thrownError != 'undefined') alert(xhr.status + ': ' + xhr.statusText + '\n' + thrownError);
},
'success': function(details){
var sOut = "";
$.each(details.aaData, function(i,item){
// draw the details data row
sOut += ...
});
oTable.fnOpen( nTr, sOut, 'descriptionSubgrid' );
}
});

// hide the Processing... message
$(".dataTables_processing").hide();
}
});
});
}
[/code]

mstone42

Okay, I solved the problem - may not be the "proper" way to handle it, but it works.

The jQuery hide() function adds a "display:none" to the style of the object, so regardless of visibility it'll always be hidden. So, the solution I am using is setting the css directly.

Changing line 22 above to:
[code]
$(".dataTables_processing").css('visibility','visible');
[/code]

Delete line 43 and add the "complete" parameter to the $.ajax call:
[code]
$.ajax({
<< SNIP >>
"complete": function () {
// hide the Processing... message
$(".dataTables_processing").css('visibility','hidden');
}
[/code]