DataTable Editing does not work as advertised when using an Ajax call to populate the table

chris_n

I have a table populated by Ajax (sAjaxSource). When attempting to make this table editable by following the example here: http://www.datatables.net/examples/api/editable.html the table is generated ok, but the editable handlers are not applied.

If I either set a breakpoint in Firebug or insert an alert just before calling .editable, the handlers are applied ok and things work as expected.

It appears that the calls to .dataTable and to .editable are happening asynchronously and the breakpoint/alert introduces enough of a pause for .dataTable to complete before .editable is fired.

I'm very green with jQuery and JS in general.

Any suggestions on how to go about correcting this problem?

Thanks

chris_n

I figured it out. Here's what works for me:

I use fnDrawCallback to setup the .editable handler so it is called *after* the table is drawn rather than *as* the table is drawn. Here's the code:

[code]
"fnDrawCallback": function() {
/* Apply the jEditable handlers to the table */
$('#order tbody td').editable( "../path/to/script", {
"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') };
},
"height": "14px"
} );
}
[/code]