fnAddData Usage With jEditable Plugin

johnadamsy

Hello,
So I have intergrated the jEditable as explained here: http://code.google.com/p/jquery-datatables-editable/wiki/AddingNewRecords

But I get an with something like: "DataTables warning (table id = 'table_inventory'): Requested unknown parameter 'product_id' from the data source for row ...".

@Allan did mention to me that I have not passed the correct object to the function fnAddData...but As you can see my implementation...I have not used that function yet:
[code]
var oTable=$('#table_inventory').dataTable({

"sDom": 'R<"H"lfr>t<"F"ip<',

"aoColumns":[

{"mDataProp":"product_id"},

{"mDataProp":"product_name"},

{"mDataProp":"product_price"},

{"mDataProp":"product_quantity"}

],

"oColReorder": {

"aiOrder": [0, 1,2, 3 ]

},

"bProcessing":true,

"bServerSide":true,

"sAjaxSource":"scripts/objects.php",

"sScrollY":"250px",

"bJQueryUI":true,

"fnOnEditing": function(input) //some additional event's info

{

$("#trace").append("Updating cell with value " + input.val());

return true;

},

fnOnEdited: function(status)

{

$("#trace").append("Edit action finished. Status - " + status);

},

"fnShowError":function (message, action) {

switch (action) {case "update":jAlert(message, "Update failed");

break;

case "delete":

jAlert(message, "Delete failed");

break;

case "add":

$("#lblAddError").html(message);

$("#lblAddError").show();

break;

}

},

"fnStartProcessingMode":function (){

$("#processing_message").dialog();},

"fnEndProcessingMode": function (){

$("#processing_message").dialog("close");},

"fnOnDeleting":function (tr, id, fnDeleteRow){

jConfirm('Are You Sure You Want to Delete the Product no.: ' + id,

'Confirm Delete',

function (r) {

if (r) {fnDeleteRow(id);}

});

return false;

},

"fnOnAdded": function() {

oTable.fnDraw();

},

"fnRowCallback": function( nRow, aData, iDisplayIndex ) { //mark the needed reco id

$(nRow).attr('id', aData.product_id );

return nRow;},

"sPaginationType":"full_numbers",

/*"sDom":'<"H"Tfr>t<"F"ip>',*/

"oTableTools":{

"aButtons":["copy","csv","xls","pdf",

{

"sExtends":"collection",

"sButtonText":"Save",

"aButtons":["csv","xls","pdf"]

}

]

},

"bPaginate":true

}).makeEditable({

sUpdateURL:"UpdateData.php",

sAddURL: "AddData.php"
});//end of datatable code
[/code]

Wondering how that comes in play given that I am posting data to the server side.

Well, as for the fnAddData function, the only reference I could get is this:
[code]
$(document).ready(function() {
oTable = $('#example').dataTable();
} );

function fnClickAddRow() {
oTable.fnAddData( [
giCount+".1",
giCount+".2",
giCount+".3",
giCount+".4" ] );

giCount++;
}
[/code]

Though I am not getting it right with integrating to the returned Ajax data.
--John.

allan

Ah okay - didn't realise you were using the editable plug-in. Its 3rd party so I'm not 100% certain about its internals, but looking at the source it does use fnAddData internally and creates an array based on the 'del' attribute in your form. So if you had somewhere - that would do it I think (the function _fnOnRowAdded - line 274).

Allan

johnadamsy

I have had a look at the function:

[code] ///Event handler called when a new row is added and response is returned from server
function fnOnRowAdded(data) {
properties.fnEndProcessingMode();

var iColumnCount = oTable.dataTableSettings[0].aoColumns.length;
var values = new Array();

$("input:text[rel],input:radio[rel][checked],select[rel],textarea[rel]", oAddNewRowForm).each(function () {
var rel = $(this).attr("rel");
if (rel >= iColumnCount)
properties.fnShowError("In the add form is placed input element with the name '" + $(this).attr("name") + "' with the 'rel' attribute that must be less than a column count - " + iColumnCount, "add");
else
values[rel] = this.value;
});[/code]

and apparently the is explained like this:

"Rel attribute must have position of the cell where value of the input field should be placed if the add operation succeeds. Any field in the form that should not be added in the table should not be mapped to the table with a rel attribute."

So that would only mean that, there's no way an database attribute such as "product_id" would be put there as it would return that error quoted in the function above, the "rel" must pick a numeral which simply the column position in the datatable rendered to the user.

As for my case, I guess the error is still pointing back to:
[code]"aoColumns":[

{"mDataProp":"product_id"},

{"mDataProp":"product_name"},

{"mDataProp":"product_price"},

{"mDataProp":"product_quantity"}

],[/code] ...

The issue may be the returned data format...? Funny that the edit works funny fine, but this one is proving to be a big one... hahaha

allan

> the "rel" must pick a numeral which simply the column position in the datatable rendered to the user.

It can be a string as well - "product_name" for example and that should allow it to work with fnAddData. I think the editable plug-ins documentation is out-of-date or limited here...

I'd suggest adding "console.log( values );" just before the editable plugin calls fnAddData and check it is passing in what is expected (which it obviously isn't at the moment, but changing the rel attributes hopefully will allow it to do so.

Allan

johnadamsy

You are right about the plugin being out of date...I happened to land on the latest (2.0.6) release... at:
http://code.google.com/p/jquery-datatables-editable/source/browse/trunk/media/js/jquery.dataTables.editable.js

The error is gone, must have been a bug in the previous (1.0.0) which I was using.

But when 1 issue is sorted, another one crops up....now it just does nothing...hoping to get over this really soon.

--John

johnadamsy

Firebug does do some magic.. :) Thanks for the heads up... Yeah, the console shows the values I ought to post, even tested on the server side, and got the correct response of one of the values posted.

It was my dump brain..LOL! Was some stupid SQL error, that's why wasn't responding! :P

Thanks alot Allan. Always hear of firebug but never really used it...cool plugin!