fnServerData makes infinite http request when we have the callback function

junoraja

Hi,

I am using Serverside processing, sAjaxSource, fnServerData, $.ajax(), and REST service to get response from the server, and I am using a callback function, Below is the code lines for the datatable configuration,
[code]
var listDataTableMDConfig = {
"aoColumns": [
{ "sTitle": "product_path" },
{ "sTitle": "Pre product_path" },
{ "sTitle": "product_image" },
{ "sTitle": "" },
{ "sTitle": "product_status" }
],
"bJQueryUI": true,
"bAutoWidth": false,
"sDom": "T<'clear'>lfrtip",
"bSort": false,
"bServerSide": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"sAjaxSource": brokenImagesApiFramework.serviceHandler,
"fnServerData": function (sSource, aoData, fnCallback) {
aoData.push({ "name": "requestType", "value": "mdData" });
aoData.push({ "name": "method", "value": "extractDatatable" });
$.ajax({
"dataType": 'xml',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (xmlResponse) {
brokenImagesApiFramework.assignBrokenMDImageList(xmlResponse)
},
"error": function (req, textStatus, errorThrown) {
console.log("mdData Failure", req, textStatus, errorThrown);
}
});
},
"oLanguage": {
"sLengthMenu" : "sLengthMenu",
"sZeroRecords" : "sZeroRecords",
"sInfo" : "sInfo",
"sInfoEmtpy" : "sInfoEmtpy",
"sInfoFiltered" : "sInfoFiltered",
"oPaginate": {
"sNext": ">",
"sLast": ">>",
"sFirst": "<<",
"sPrevious": "<"
}
}
};
[/code]
Here goes the integration in the framework brokenImagesApiFramework,
[code]
brokenImagesApiFramework.listMd = $('#listMd').dataTable(brokenImagesApiFramework.listDataTableMDConfig);

// callback function in the framework
assignBrokenMDImageList : function(XMLresponse) {
var payload = '';
var json = false;

// extracting json response from XML response
payload = $(XMLresponse).find('response').text();
json = eval('(' + payload + ')');
if(typeof json.data == 'object') {
// clearing the table
brokenImagesApiFramework.listMd.fnClearTable(0);

// build list of DB Broken Images
var brokenImageData = json.data.aaData;
for (var key in brokenImageData) {

if(brokenImageData[key] != null) {
brokenImagesApiFramework.listMd.fnAddData([
brokenImageData[key][0], // path_prefix
brokenImageData[key][1], // path
brokenImageData[key][2], // openImageDialog
brokenImageData[key][3], // ImageIcon
brokenImageData[key][4] // Broken Status
], false);
} // end: if
} // end: for
brokenImagesApiFramework.listMd.fnDraw();
} // end: if
}
[/code]
Here is the rest response from the server
[code]
<?xml version="1.0" encoding="UTF-8"?>


{"version":"1.0.0",
"data":{
"sEcho":18,"iTotalRecords":10,"iTotalDisplayRecords":10,
"aaData":[
["800003","999","1","800003_a.jpg","jpg.gif","Bulb Silk Ball Lights","X"],
["800004","999","1","800004_a.jpg","jpg.gif","Fiber Magic Light","X"],
["800001","999","1","800001_a.jpg","jpg.gif","Nokia E75","X"],
["300017","999","1","300017_a.jpg","jpg.gif","Trouser","X"],
["300010","999","1","300010_a.jpg","jpg.gif","Bare Denim Jeans","X"],
["300010","999","1","300010_a.jpg","jpg.gif","Bare Denim Jeans","X"],
["800004","999","1","800004_a.jpg","jpg.gif","Fiber Magic Light","X"]
]
}}

success


[/code]
After getting the response, I am extracting the JSON data from xmlresponse and adding it to datatable using fnAddData,

But while using fnAddData (currently fnAddData present within a Loop), it inturn calls redraw process to refresh datatable. But, for some reason, datatable makes another server request and callback of fnServerData also been called. Hence, it loops infinitely.

I have also tried by making second argument of fnAddData to false, so that It won't redraw the datatable, and fnDraw have been called explicitly outside the loop after completing all fnAddData,

Yet, the same issue appears, But, now the number of requests sent have been reduced, But still the infinite requests have been sent.

I am not sure, how to proceed, or what is the mistake I’m making

Thank you please!

Regards,
Juno R