Requested unknown parameter after add new row

jpwdesigns

First off, let me say this is a freaking awesome project. Great work!

I am using server side processing and The jQuery DataTables Editable plug-in.

Works great but...when adding a new row i get the following error:

[quote]DataTables warning (table id = 'usertable'): Requested unknown parameter 'id' from the data source for row 4[/quote]

The row does get added and the table redraws with the new row after closing the popup error warning.

Initialization script:
[code]
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#usertable').dataTable({
"bStateSave": true,
"oLanguage": {
"sSearch": "Search all columns:"
},
bJQueryUI: true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bPaginate": true,
"sAjaxSource": "message/message_list_callback",
"aoColumns": [
{ "mDataProp": "id", "sWidth": "25px", "sName": "id" },
{ "mDataProp": "message", "sName": "message" },
{ "mDataProp": "message_group", "sName": "message_group" },
{ "mDataProp": "type", "sName": "type" }
]}).makeEditable({
sUpdateURL: "message/edit",
sAddURL: "message/add",
sAddHttpMethod: "POST",
sDeleteHttpMethod: "POST",
sDeleteURL: "message/delete",
fnOnDeleted: function() {
oTable.fnDraw()
},

"aoColumns": [
null,
{
tooltip: 'Double-Click to edit message',
type: 'textarea',
submit:'Save changes'
},
{
tooltip: 'Double-Click to change message group',
type: 'select',
onblur: 'cancel',
submit: 'Ok',
loadurl: 'message/group_list_callback',
loadtype: 'GET'
},
{
tooltip: 'Double-Click to change message type',
type: 'select',
onblur: 'cancel',
submit: 'Ok',
data: "{'Scheduled':'Scheduled','User Initiated':'User Initiated'}"
}

],
oAddNewRowButtonOptions: {
label: "Add...",
icons: {primary:'ui-icon-plus'}
},
oDeleteRowButtonOptions: {
label: "Remove",
icons: {primary:'ui-icon-trash'}
},
oAddNewRowFormOptions: {
title: 'Add a new message',
width: '450px',
show: "blind",
hide: "explode",
modal: true
},
sAddDeleteToolbarSelector: ".dataTables_length"

});

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
});
[/code]

Table html
[code]



ID
message
message group
type




Loading data from server











[/code]

The php is based on Allen's server side script.
example output:
[code]
{
"sEcho":0,
"iTotalRecords":60,
"iTotalDisplayRecords":1,
"aaData":[{
"DT_RowId":"13",
"id":"13",
"message":"some text here",
"message_group":"Control Group",
"type":"Scheduled"
}]
}
[/code]

As I said before the add row is working, but just throwing this error. The delete row and inline updating is all working flawlessly.

Here is the add new row form
[code]


Message Body





Message Group


Control Group
High A
Low A
High B
Low B
Joint: High A, Low B
Joint: High A, High B
Joint: Low A, Low B
Joint: Low A, High B






Message Type


Scheduled
User Initiated



[/code]

the hidden input row above with the value of DATAROWID is supposed to auto fill in with the id that is returned from the add row function. The add row function is supplying the new insert id.

Any idea how to get this error to go away?

allan

Can you show us the full JSON return from the server, as seen by firebug please? It sounds like the forth array returned doesn't have an "id" parameter in it.

Allan

jpwdesigns

Hi Allan, thanks for the question.

The error will always refer to the first column name in this case id. If I remove the first column it will refer to message which would then be the first column.

The error will always mention the last rowId as opposed to actual id currently being shown. For example, the row's id may be 60 but if im only showing 10 rows and on page 6 row 60 would be the tenth row shown so the error would report not being able to identify the id of row 10 (id 60).

Example: if I have first column "id" and showing 15 rows in the datatable and then i add new row the error would say "Requested unknown parameter 'id' from the data source for row 15"

the json data is fine. it checks out. the error seems to be something to do with the function to add the new row to the visible table.

here is an example showing 10 rows on page 5
[code]
{
"sEcho":2,
"iTotalRecords":60,
"iTotalDisplayRecords":60,
"aaData":[
{
"DT_RowId":"41",
"id":"41",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"42",
"id":"42",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"43",
"id":"43",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"44",
"id":"44",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"45",
"id":"45",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"46",
"id":"46",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"47",
"id":"47",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"48",
"id":"48",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"49",
"id":"49",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
},
{
"DT_RowId":"50",
"id":"50",
"message":"the text message",
"message_group":"Control Group",
"type":"Scheduled"
}
]
}
[/code]

jpwdesigns

More info:

post to add new row from firebug:
[code]
id=DATAROWID&message=teste+test+estes+t+est+esetes&message_group=2&type=Scheduled
[/code]

example response from post:
[code]
97
[/code]

parameters from get request to json:
[code]
_ 1316975278152
bRegex false
bRegex_0 false
bRegex_1 false
bRegex_2 false
bRegex_3 false
bSearchable_0 true
bSearchable_1 true
bSearchable_2 true
bSearchable_3 true
bSortable_0 true
bSortable_1 true
bSortable_2 true
bSortable_3 true
iColumns 4
iDisplayLength 10
iDisplayStart 40
iSortCol_0 0
iSortingCols 1
mDataProp_0 id
mDataProp_1 message
mDataProp_2 message_group
mDataProp_3 type
sColumns
sEcho 3
sSearch
sSearch_0
sSearch_1
sSearch_2
sSearch_3
sSortDir_0 asc
[/code]

jpwdesigns

bump

jpwdesigns

anyone? really would appreciate any feedback you might have.

GregP

I'm afraid I don't have much to add; just wanted to let you know that your post isn't just hanging out in the cold. I've been puzzling through the code and I just can't see any reason for the error.

That being said, the first thing I would do is make sure that I'm not using the string "id" in any other conspicuous areas. For example, in the tfooter, there's a TH with the name "id". I don't recall there being any conflict in this regard, but I always like to be safe rather than sorry and never use the same label or variable twice (unless they're private variables in which case meh).

Lame suggestion I know, but I primarily wanted you to know that in my case it's not that I'm ignoring you so much as that I'm ignorant and can't figure out what the problem could be.

jpwdesigns

Hi GregP,

Thanks for the reply. Yeah that is an interesting idea about the tfooter. I did remove the footer and still have the same problem. tonight i came up with a work around by commenting out some code from jquery.datatables.editable.js and adding a callback to redraw the table. I guess it adds another hit on the db but it works.

Ok so i commented out the following:
[code]
// //Add values from the form into the table
// var rtn = oTable.fnAddData(values);
// var oTRAdded = oTable.fnGetNodes(rtn);
// //Apply editable plugin on the cells of the table
// fnApplyEditable(oTRAdded);
// //add id returned by server page as an TR id attribute
// properties.fnSetRowID($(oTRAdded), data);
//
// $("tr.last-added-row", oTable).removeClass("last-added-row");
// $(oTRAdded).addClass("last-added-row");
[/code]
and added on the page
[code]
fnOnAdded: function() {
oTable.fnDraw(false);
},
[/code]
Works well so far. bummed i couldn't figure out what the issue is.

allan

Ah - I didn't realise you were using the jEditable plug-in. If you disable that, does it all work okay or not? Like Greg, looking at your code I don't see anything obvious which is making it not work with just DataTables.

Allan

jpwdesigns

HI I think the issue is with datatables.editable not DataTables. I've been in contact with him and he think's he knows what could be causing the problem and is working on a new release that would include a fix.

GregP

Nice! That'll benefit a lot of people I'm sure.

allan

Excellent stuff - thanks for letting us know :-)

Allan

demonstator

I just installed a newer version and the problem is no longer present.
Thank you very much for this post !

octave

Where can i find the new version ? because with the last v1.8.2, this bug isn't solved....thanks

sourcier

Hi,
I had the same problem, it's because your table is set by mdataprop.
To add a new row you need to create a object and not an array, in the plugin jEditable it's create an array values.
To change that you need to create a Object,
In the editable plugin add a var like that in the function _fnOnRowAdded after the definition of values :

[code]
var Json = {
"image" : values[0],
"id" : values[1],
"name" : values[2]
}
[/code]
and add change
[code]
var rtn = oTable.fnAddData(Json );
[/code]

dthunsterblich

Hey!

I had the same issue and strugled almost a day finding out what the solution would be, until I found this thread. I also solved it with an update of jquery.dataTables.editable.js to Version: 2.3.2.

Thanks,

rlatigano

Hey!, I have a problem with bDeferrender + makeeditable on 2º page, makeeditable not work.