DataTables warning (table id = 'fleetManager'): Requested unknown parameter 'c.2.v' from the data...

tday

I tried to run the debugger bookmarklet and ran into two issues. First, it did not work when accessed from https - no big deal so I used http and it returned a js error: Uncaught RangeError: Maximum call stack size exceeded.

Oh well, so the error in the title occurs after submitting a row update to the database. The database update is successful, but the deep json structure I specified (c.2.v) for the first column of my table seems to fail when updating the table after a successful update. Since the debug ran into a problem I'll simply post the returned data first:

{
aaData: []
fieldErrors: []
id: "row_2"
row: {
DT_RowId: "row_2"
fleet_name: "Don's Fleet Axx"
sError: ""
}
}

... and the javascript that instantiates dataTable and Editor...

[code]
(function($){
$(document).ready(function() {
var visualId = 6;
var editor;

editor = new $.fn.dataTable.Editor( {
"ajaxUrl" : "../management/fleet?option=com_ajax&module=datatables_editor&format=raw",
"domTable" : "#fleetManager",
"idSrc": "c.0.v",
"fields": [ {
"label": "Fleet Name:",
"name": "fleet_name",
"dataProp": "c.2.v",
"type": "text"
}
]
} );

// New record
/*$('a.editor_create').on('click', function (e) {
e.preventDefault();

editor.create(
'Create new record',
{ "label": "Add", "fn": function () { editor.submit() } }
);
} );*/

// Edit record
$('#fleetManager').on('click', 'a.editor_edit', function (e) {
e.preventDefault();

editor.edit(
$(this).parents('tr')[0],
'Edit record',
{ "label": "Update", "fn": function () { editor.submit() } }
);
} );

// Delete a record (without asking a user for confirmation)
$('#fleetManager').on('click', 'a.editor_remove', function (e) {
e.preventDefault();

editor.remove( $(this).parents('tr')[0], '123', false, false );
editor.submit();
} );

$('#fleetManager').dataTable({
"sDom": "Tfrtip",
//"sDom": "<'row'<'col-xs-6'T><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
"bProcessing": true,
"sAjaxSource": "../index.php?option=com_visualization&id="+visualId+"&format=json",
"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function(result){
console.log("initial result: ",result);
var newResult = {"rows":result.resultset[0].rows};
//TODO: Dynamically define aoColumns based on cols object
console.log('newResult: ',newResult);
fnCallback(newResult);
}
} )
},
"aoColumns": [
{ "mData": "c.2.v" },
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete'
}
],
"fnCreatedRow": function( nRow, aData, iDataIndex ) {
//console.log('data:'+aData);
//console.dir(aData);
//console.log('row:'+nRow);
$(nRow).attr('id','row_'+aData.c[0].v);
},
"sAjaxDataProp": "rows",
"oTableTools": {
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor }
// { "sExtends": "editor_edit", "editor": editor },
// { "sExtends": "editor_remove", "editor": editor }
]
}
});
} );

})(jQuery);
[/code]

Sorry, no access to the site is avaialable.

allan

Hi,

Thanks very much for the code! Would you also be able to post a sample of the JSON data that is given from your `console.log('newResult: ',newResult);` statement, or if possible, the full data?

> the deep json structure I specified (c.2.v) for the first column of my table seems to fail when updating the table after a successful update

In what way does it fail - do you get a warning from DataTables, or a Javascript error?

Thanks,
Allan

tday

Of course, here is the message returned after a successful database update:

[quote]DataTables warning (table id = 'fleetManager'): Requested unknown parameter 'c.2.v' from the data source for row 0[/quote]

The first row of the table does not display correctly no matter which row is edited meaning that the value of the first row is not displayed.

...and an example of the data which is the json format that the google charts api consumes...

newResult Object:
[code]
{
"rows": [
{
"c": [
{
"v": 1,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Troy's Fleet 1xx",
"f": null
}
]
},
{
"c": [
{
"v": 2,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Don's Fleet Axx",
"f": null
}
]
},
{
"c": [
{
"v": 3,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Don's Fleet Bx",
"f": null
}
]
},
{
"c": [
{
"v": 4,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Troy's Fleet 2xx",
"f": null
}
]
},
{
"c": [
{
"v": 5,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Troy's Fleet 3",
"f": null
}
]
},
{
"c": [
{
"v": 6,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Don's Fleet Cx",
"f": null
}
]
},
{
"c": [
{
"v": 7,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "new fleetx",
"f": null
}
]
}
]
}
[/code]

allan

Fantastic - thanks for this!

The problem is that the data being returned on edit (or create) does not match the format of the data for each row on load. So for example, on edit you have:

[code]
{
DT_RowId: "row_2"
fleet_name: "Don's Fleet Axx"
sError: ""
}
[/code]

But on load the data for a row looks like:

[code]
{
"c": [
{
"v": 1,
"f": null
},
{
"v": 0,
"f": null
},
{
"v": "Troy's Fleet 1xx",
"f": null
}
]
}
[/code]

That is the fundamental problem here. You want to return the data in the `row` parameter from the create / edit actions in the same format as the data that is being used for the DataTable rows.

Is that a change you can make?

Allan

tday

...suspected this, and now I have a specific code block to address. Thanks Allan.

I like that the ingestion capabilities of datatables are somewhat data agnostic in that I can easily provide a transform. Since the create / edit is standardized on the data engine you provided, is there a roadmap ticket to accept the default (datatables) row parameter to finish a roundtrip update? Translation: I'd like to be even more lazy and not write my return row data structure :)

Troy

allan

Actually - it is there already. You can just not return a `row` parameter and Editor will use the values in the form to create a new object for the row. The reason I recommend using a `row` parameter is should you have an computed values in the row (last update time for example) or if the Editor form doesn't cover all data in the row (i.e. there would be gaps in the data, which would not be good).

I have actually been thinking of removing this ability in Editor (heh - the exact opposite of your request!) for these reasons. Having that ability is potentially more harmful that useful.

In my own Editor libraries, this is resolved by just running a common `select` for get, create and edit commands, just with a slightly different `where` - so its only an extra line or two.

Allan

tday

Got it. Thank you for such prompt replies. -T