DataTables + MySQL + jEditable

Nubby9.5

Hi,
I just started using DataTables in hopes to have a functional replacement to SpryData Tables. So far, the DataTables plugin appears to do everything Ineed and more!

I am trying to incorporate the jEditable plugin with the MySQL server-side processing DataTable. The table draws and displays the information from the database just fine. It however, will not open/display any edit box(s) when table records are clicked. At first I suspected that the event handlers for jEditable are not being added to the elements in the table as with: http://datatables.net/forums/comments.php?DiscussionID=340&page=1
Despite all attempts to initalize the jEditable plugin after the table is drawn the solution to this issue alludes me. Can anyone help me see what I am missing?

DataTables:
Version 1.5b11

Initialisation code:
[code]

var oTable;
$(document).ready(function() {

/* Apply the jEditable handlers to the table */

$('#example tbody td').editable( 'scripts/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"height": "14px"
} );

/* Init DataTables */
oTable = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php"
} );
} );

[/code]

Best regards,

Jason

allan

Hi Jason,

I'm reasonably sure that your first suspicion is correct here - the events are not being applied for jEditable. The reason for this is that your code indicates that the events are being created before DataTables has been able to go to the server and get the information required to draw the TD elements.

Also you will need to reapply the events after each draw, since DataTables will create new DOM elements for each new row. To do all of this you can stick your jEditable initialisation code into fnDrawCallback() : http://datatables.net/usage#fnDrawCallback

Finally, you might also be interested in using Visual Event - it's a bookmarklet tool of mine which shows you visually what elements have events attached to them, can help confirming theories and debug solutions: http://www.sprymedia.co.uk/article/Visual+Event

Regards,
Allan