Multiple datatables with jEditable - only first one will update
Multiple datatables with jEditable - only first one will update
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
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
This discussion has been closed.
Replies
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
John