Multiple datatables with jEditable - only first one will update

Multiple datatables with jEditable - only first one will update

johnajohna Posts: 7Questions: 0Answers: 0
edited January 2011 in General
I have four very similar datatables with jEditable in different s on the same page, but haven't been able to figure out how to get updating working on any table except the first. Firebug reports:
oSettings.aoData[iDataIndex] is undefined
[Break on this error] if ( oSettings.aoData[iDataIndex...agName('td')[j-iCorrector] == nNode ) on line 1815 in datatables.js
when pressing enter in a jEditable cell.
I set up datatables one time with this:
[code]
$(document).ready(function() { //set parameters for datatables
$('.rntable').dataTable ( {
"sScrollY": "380px",
"bPaginate": false }
);
} );
[/code]
and then have four functions, one for each table, like:
[code]
$(document).ready(function() {
// Init DataTables
var oTable = $('#renametab1').dataTable(); // #settingsp6t1
// Apply the jEditable handlers to the table
//$('td', oTable.fnGetNodes()).editable('setsavecust.php', { //this one edits all columns.
$('tbody tr td:nth-child(2)').editable('setsavecust.php', { // only the second col is editable in this line
"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": "13px"
} );
} );
[/code]

I'm pretty much of a newbie with all this and would greatly appreciate some help.
Many thanks,
John

Replies

  • allanallan Posts: 63,516Questions: 1Answers: 10,472 Site admin
    Hi John,

    I would say most likely that the problem is due to this line here:

    [code]
    $('tbody tr td:nth-child(2)').editable('setsavecust.php', {
    [/code]
    That is applying the jEditable event handler to all tbody (...) elements on the page - so if you run it four times, you'll add the event handlers fours times. This should be confirmable with Visual Event ( http://sprymedia.co.uk/article/Visual+Event ).

    So what I think is needed to address this is to limit the selection to the table of interest in that function:

    [code]
    $('tbody tr td:nth-child(2)', $('#renametab1')[0]).editable('setsavecust.php', {
    [/code]
    Other than that, as far as I can see, the rest of it looks good - so hopefully that will do the trick!

    Regards,
    Allan
  • johnajohna Posts: 7Questions: 0Answers: 0
    Thanks Allan, your suggestion worked perfectly,

    John
This discussion has been closed.