fnReloadAjax not working with server side and pipelining
fnReloadAjax not working with server side and pipelining
bphein1980
Posts: 3Questions: 0Answers: 0
I have a datatable where I can click on the first cell to create a dialog... the dialog has a form that is prepopulated with the clicked row's data... this is actually to create a new record for the table, not edit it. After I successfully submit the dialog form and add the data server side, I am calling fnReloadAjax() to try to "recreate" the table, but I am getting an error: "Uncaught TypeError: Cannot read property 'length' of null". This is referring to aoData in the pipelining code. Basically, aoData appears to not be defined. I've done a good 4 hours of trying to find an answer as to what is wrong and I just cant come up with a solution.
No ajax call is made, it seems to be erroring before it gets to that portion of the pipeline code. I changed the pipeline code to use a POST instead of a GET, but I dont think that is what is causing the problem. I have a datatable elsewhere where this is required due to the massive amount of columns ... the URL query string created was too long for a browser to properly handle (more than 2000 characters).
I cannot provide a link to the page this is on due to it being a restricted admin site.
Here is my datatables debugger: http://debug.datatables.net/upokan
Here is how I initialize the table:
[code]
var oTable = $('#relationships_caliber').dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sDom": '<"H"fl>t<"F"ip>r',
"sAjaxSource": "api.cfm?method=getRelationshipsCaliber",
"fnServerData": fnDataTablesPipeline,
"aoColumnDefs": [
{ "sClass":"addCaliber_open", "aTargets":[0] },
{ "sClass":"editable", "aTargets":[4] } // adds a class to column 4 which makes it inline editable
],
"fnDrawCallback": function(){
// ---------------------------
// handle when the addCaliber_open cell is clicked
// ---------------------------
$('#relationships_caliber tbody td.addCaliber_open').on("click", function(){
// get the data from the row to prepopulate a form
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
// populate the form fields
// is there a better way to do this inside of openDialog function; pass optional data?
scrape_data.val(aData[0]);
input_data.val(aData[1]);
// set the selection by the option label
$("#scrape_site_id option").filter(function() {
return $(this).text() == aData[2];
}).prop('selected', true);
$.uniform.update("#scrape_site_id"); // update uniform after setting selection other the 1st option will always be shown
// open the dialog box
openTopSlideDialog("addCaliber");
});
// ---------------------------
// handle inline editing of the match column
// ---------------------------
$('#relationships_caliber tbody td.editable').editable('api.cfm?method=updateTableCell', {
"callback": function(sValue, y) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate(sValue, aPos[0], aPos[1], false, false);
},
"submitdata": function(value, settings) {
return {
"table": "relationships_caliber",
"key": "relationship_caliber_id",
"column": oTable.fnGetPosition(this)[2],
"id": this.parentNode.getAttribute('id')
};
},
"submit": "OK",
"tooltip": "Click to edit",
"cssclass": "jEdit",
"type": "uniform-select",
"data": function(value, settings){
return "{'N':'No', 'Y':'Yes', 'selected': '" + $.trim(value) + "'}"
}
});
}
}).fnSetFilteringDelay();
[/code]
Here is the handler to the form submit where the fnReloadAjax() is being called;
[code]
$("#addCaliber form").on("submit", function(e){
e.preventDefault();
var postData = JSON.stringify($(this).serializeObject());
$(".nNote").remove(); // clear any previous alerts
$.ajax({
url: "api.cfm",
type: "POST",
data: {
method: "createRelationshipsCaliber",
data: postData
}
})
.done(function(msg){
var msg = $.parseJSON(msg);
var status = "nSuccess";
if(msg.status == "fail")
status = "nFailure";
else
oTable.fnReloadAjax();
// create the alert of the outcome
$("").prependTo("#addCaliber form");
$("." + status + " p").html( msg.message );
});
});
[/code]
Here is the pipeline code:
[code]
var oCache = {
iCacheLower: -1
};
function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i
No ajax call is made, it seems to be erroring before it gets to that portion of the pipeline code. I changed the pipeline code to use a POST instead of a GET, but I dont think that is what is causing the problem. I have a datatable elsewhere where this is required due to the massive amount of columns ... the URL query string created was too long for a browser to properly handle (more than 2000 characters).
I cannot provide a link to the page this is on due to it being a restricted admin site.
Here is my datatables debugger: http://debug.datatables.net/upokan
Here is how I initialize the table:
[code]
var oTable = $('#relationships_caliber').dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sDom": '<"H"fl>t<"F"ip>r',
"sAjaxSource": "api.cfm?method=getRelationshipsCaliber",
"fnServerData": fnDataTablesPipeline,
"aoColumnDefs": [
{ "sClass":"addCaliber_open", "aTargets":[0] },
{ "sClass":"editable", "aTargets":[4] } // adds a class to column 4 which makes it inline editable
],
"fnDrawCallback": function(){
// ---------------------------
// handle when the addCaliber_open cell is clicked
// ---------------------------
$('#relationships_caliber tbody td.addCaliber_open').on("click", function(){
// get the data from the row to prepopulate a form
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
// populate the form fields
// is there a better way to do this inside of openDialog function; pass optional data?
scrape_data.val(aData[0]);
input_data.val(aData[1]);
// set the selection by the option label
$("#scrape_site_id option").filter(function() {
return $(this).text() == aData[2];
}).prop('selected', true);
$.uniform.update("#scrape_site_id"); // update uniform after setting selection other the 1st option will always be shown
// open the dialog box
openTopSlideDialog("addCaliber");
});
// ---------------------------
// handle inline editing of the match column
// ---------------------------
$('#relationships_caliber tbody td.editable').editable('api.cfm?method=updateTableCell', {
"callback": function(sValue, y) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate(sValue, aPos[0], aPos[1], false, false);
},
"submitdata": function(value, settings) {
return {
"table": "relationships_caliber",
"key": "relationship_caliber_id",
"column": oTable.fnGetPosition(this)[2],
"id": this.parentNode.getAttribute('id')
};
},
"submit": "OK",
"tooltip": "Click to edit",
"cssclass": "jEdit",
"type": "uniform-select",
"data": function(value, settings){
return "{'N':'No', 'Y':'Yes', 'selected': '" + $.trim(value) + "'}"
}
});
}
}).fnSetFilteringDelay();
[/code]
Here is the handler to the form submit where the fnReloadAjax() is being called;
[code]
$("#addCaliber form").on("submit", function(e){
e.preventDefault();
var postData = JSON.stringify($(this).serializeObject());
$(".nNote").remove(); // clear any previous alerts
$.ajax({
url: "api.cfm",
type: "POST",
data: {
method: "createRelationshipsCaliber",
data: postData
}
})
.done(function(msg){
var msg = $.parseJSON(msg);
var status = "nSuccess";
if(msg.status == "fail")
status = "nFailure";
else
oTable.fnReloadAjax();
// create the alert of the outcome
$("").prependTo("#addCaliber form");
$("." + status + " p").html( msg.message );
});
});
[/code]
Here is the pipeline code:
[code]
var oCache = {
iCacheLower: -1
};
function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i
This discussion has been closed.
Replies
[code]
// This is the calling code snippet
...
var iRequestStart = fnGetKey(aoData, "iDisplayStart");
...
function fnGetKey( aoData, sKey )
{
// ------------------------
// RIGHT HERE: aoData is null and has no length method
// ------------------------
for ( var i=0, iLen=aoData.length ; i