using the example from /blog/Inline_editing with a json data source

gravity

Hello,

Datatables looks great, I'm currently implementing it for a project, I've run into a little snare. I like the idea of the editor but I wanted one inline, the solution i found was a post here: I might even go as far as jeditable so i can just click the field and auto save on lose focus, but your solution is pretty nice.

http://datatables.net/blog/Inline_editing

Anyway, i'm learning the datatables library and i have spent hours stumped.

I find if i copy and paste your blog example 100%, but only change the data source to json, it no longer works. The solution I *attempted* to use was through mDataProp, eg:

[code]
"sAjaxSource": "/skynet/data/test1.json",
"bProcessing": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "mDataProp": "engine", "sDefaultContent": "" },
{ "mDataProp": "browser", "sDefaultContent": "" },
{ "mDataProp": "platform", "sDefaultContent": "" },
{ "mDataProp": "details", "sDefaultContent": "" },
{ "mDataProp": null,
"sDefaultContent": 'Edit'},
{ "mDataProp": null,
"sDefaultContent": 'Delete'}
]
[/code]

I then obviously change my table to be empty bar TH from columns that arn't null, and make sure all the columns line up. I cant see any major change here.

Once i set the data source to JSON, the REMOVE still works, in fact EDIT works, but only the SAVE component. The EDIT/LOAD is the problem, all the input fields are loaded with 'undefined', for some reason.

That is, that:

[code]var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );[/code]

Inside the delete button on rows works, where as:

[code]var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '';
jqTds[1].innerHTML = '';
jqTds[2].innerHTML = '';
jqTds[3].innerHTML = '';
jqTds[4].innerHTML = 'Save';
jqTds[5].innerHTML = 'Delete';[/code]

Does not.

I tried to narrow the issue further, it appears that fnGetData is the cause of the problem, my javascript/jquery is really quite novice so when i started outputting these functions i got a little lost, just started trial and error and the frustration began.

The one relevant post i think i found on the topic is the below:

http://stackoverflow.com/questions/9795957/datatables-passing-variables

which basically outlined

[quote]
this.fnGetData = function( mRow, iCol ){ var oSettings = _fnSettingsFromNode( this[_oExt.iApiIndex] ) if ( typeof mRow != 'undefined' ){ var iRow = (typeof mRow == 'object') ? _fnNodeToDataIndex(oSettings, mRow) : mRow; if ( typeof iCol != 'undefined' ) { return _fnGetCellData( oSettings, iRow, iCol, '' ); } return (typeof oSettings.aoData[iRow] != 'undefined') ? oSettings.aoData[iRow]._aData : null; } return _fnGetDataMaster( oSettings ); }; – bandan88 Mar 21 at 1:20
If you log your nTr to console, is it showing you the node you want? The fnGetData function from DataTables' API is not likely to be the culprit. Are you trying to access oTable out of scope? (is var oTable global as it appears to be here, or is it within another function or object?) – Greg Pettit Mar 21 at 2:10[/quote]

At least this listed the fnGetData conveniently, Its all still a little too much unless i try and learn whats going on slowly and with structure. I ensured that oTable wasnt out of the scope, i even tried putting the functions within the event listener.

Anyway, I still ended up crashing and burning, figure i'll sleep on it and very much somebody who could make me VERY happy with just a small nudge in the right direction.

Thanks for reading

Cheers