Can get updated records after modifying the table with jeditable

dca

Hi everybody,
my first post here.
I'm a newbie web developer and I'm trying to figure out how to make a table in HTML.
The table contents should be read from a database, the table becomes populated with those contents and I want the table to be editable so that the user can save the cell content on the database.

I'm using the latest Bitnami suite on Windows: I've installed PHP, Apache, PostgreSQL and phpPGadmin. They all work correctly. I've implementing Datatables and Jeditable but I can't make it work.

Right now I've got an empty table displayed, the content of the debug info is the following:

[code]
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
[/code]
For what I understand here aaData[] is completely empty.
In fact I can make it work, the table, but when I save the edited cell the cell gets fullfilled with entries similar to the one above (I guess 1 entry for each row).
The edited cell table appears like this (I just Cut/Paste 1 record):
[code]
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
{"sEcho":4,"iTotalRecords":5590,"iTotalDisplayRecords":5590,"aaData":[]}
[/code]

I show you the 2 DataTable initialisations that I've been trying after reading the tutorials:
Type 1:
[code]

$(document).ready(function() {
var oTable = $('#jqtable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
/* I WAS JUST EXPERIMENTING WITH THE aoColumns FUNCTION, it returns another problem*/
"aoColumns":[
{"mData": "anno"},
{"mData": "tpdoc"},
{"mData": "nureg"},
{"mData": "tpnum"},
{"mData": "nufis"},
{"mData": "nurig"},
{"mData": "nprog"},
{"mData": "cdart"},
{"mData": "respo"},
{"mData": "lavor"},
{"mData": "dtagg"},
{"mData": "note"}
],
"fnDrawCallback": function () {
$('#jqtable tbody td').editable( 'editable_ajax.php', {
"callback": function( sValue, y ) {
/* Redraw the table from the new data on the server */
oTable.fnDraw();
},
"height": "14px"
} );
}
} );
} );


[/code]

Type 2
[code]

$(document).ready(function() {
/* Init DataTables */
var oTable = $('#jqtable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../../server_processing.php",

"aoColumns":[
{"mData": "anno"},
{"mData": "tpdoc"},
{"mData": "nureg"},
{"mData": "tpnum"},
{"mData": "nufis"},
{"mData": "nurig"},
{"mData": "nprog"},
{"mData": "cdart"},
{"mData": "respo"},
{"mData": "lavor"},
{"mData": "dtagg"},
{"mData": "note"}
]
/* These aren't working properly with Theme Roller, so I've commented them */
//"bJQueryUI": true,
//"sPaginationType": "full_numbers"
});

/* Apply the jEditable handlers to the table */

$('td', oTable.fnGetNodes()).editable( '../../editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "14px"
} );


} );


[/code]

This is the rest of the HTML's head:
[code]


<!-- Scripts -->





<!-- Styles -->

@import "css/tableStyle.css";
@import "/media/css/jquery.dataTables_themeroller.css";
@import "/media/css/jquery.dataTables.css";

[/code]


I'm correctly using the server-side PHP script for POSTGRES in server_processing.php.
Also I'm able to parse the the table from the PostgreSQL server via an ODBC implementation.
It just reads the database, builds the columns adding a style and it populates the table with each row.
Of course when the datatable.js script comes into action it overwrites this table but I wanted to make sure that the db connection is working.

Can somebody help me with this?

Debugging created with ID: iyezak

Please note that this is not a production server so the url is not accessible from the internet plus it's an environment for to test without worries. I can't publish it on the web.


Thanks in advance!

Best regards

Dimitri

dca

Seem that with the following i can populate the aaData array:
[code]

fnServerObjectToArray = function ( aElements )
{
return function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [];
for ( var i=0, iLen=json.aaData.length ; i