Help with a CRUD
Help with a CRUD
Hello ppl, I'am working in a CRUD example for 2 weeks by now, and I've stucked on the Add new entry part.
I'm trying to learn javascript and DataTables as I do this example
I'm trying to use the "add new row" of this example http://www.datatables.net/blog/Inline_editing , and after that edit the "example text" data after (without the Edit button of this example) with the jEditable
So... the problem is, after add a new line of ["", "example text", "example text", ... ] I can't edit the data, and I can't find the reason
Here's the code
[code]
$(document).ready(function() {
$('.field_1').editable( './editable_query.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"
} );
// Here I omitted the field_2 and field_3 .editable options, because they're the same as field_1
var prefix = 'new';
var i = 1;
$('#new').click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [
'',
'example text',
'example text', // I need to edit this part
'example text',
'' ] );
return i++;
} );
var oTable = $('#example').dataTable( {
"aoColumnDefs": [ // I've tried to assign the classes for the "TD" elements to see if they became editable, but not =(
{ "sClass": "field_0", "aTargets": [ 0 ] },
{ "sClass": "field_1", "aTargets": [ 1 ] },
{ "sClass": "field_2", "aTargets": [ 2 ] },
{ "sClass": "field_3", "aTargets": [ 3 ] },
{ "sClass": "field_4", "aTargets": [ 4 ] }
]
} );
});
[/code]
Assuming that the function checkbox_edit, and the page editable_query.php works perfectly, anyone can give me a opinion about this problem? thanks!!
I'm trying to learn javascript and DataTables as I do this example
I'm trying to use the "add new row" of this example http://www.datatables.net/blog/Inline_editing , and after that edit the "example text" data after (without the Edit button of this example) with the jEditable
So... the problem is, after add a new line of ["", "example text", "example text", ... ] I can't edit the data, and I can't find the reason
Here's the code
[code]
$(document).ready(function() {
$('.field_1').editable( './editable_query.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"
} );
// Here I omitted the field_2 and field_3 .editable options, because they're the same as field_1
var prefix = 'new';
var i = 1;
$('#new').click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [
'',
'example text',
'example text', // I need to edit this part
'example text',
'' ] );
return i++;
} );
var oTable = $('#example').dataTable( {
"aoColumnDefs": [ // I've tried to assign the classes for the "TD" elements to see if they became editable, but not =(
{ "sClass": "field_0", "aTargets": [ 0 ] },
{ "sClass": "field_1", "aTargets": [ 1 ] },
{ "sClass": "field_2", "aTargets": [ 2 ] },
{ "sClass": "field_3", "aTargets": [ 3 ] },
{ "sClass": "field_4", "aTargets": [ 4 ] }
]
} );
});
[/code]
Assuming that the function checkbox_edit, and the page editable_query.php works perfectly, anyone can give me a opinion about this problem? thanks!!
This discussion has been closed.
Replies
Looking around the web, it looks like there are two options - the easiest it just to call jEditable's initialisation again on each DataTables draw (this appears to be harmless as jEditable copes with initialising itself multiple times on the same element):
[code]
$(document).ready(function() {
var prefix = 'new';
var i = 1;
$('#new').click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [
'',
'example text',
'example text', // I need to edit this part
'example text',
'' ] );
return i++;
} );
var oTable = $('#example').dataTable( {
"aoColumnDefs": [ // I've tried to assign the classes for the "TD" elements to see if they became editable, but not =(
{ "sClass": "field_0", "aTargets": [ 0 ] },
{ "sClass": "field_1", "aTargets": [ 1 ] },
{ "sClass": "field_2", "aTargets": [ 2 ] },
{ "sClass": "field_3", "aTargets": [ 3 ] },
{ "sClass": "field_4", "aTargets": [ 4 ] }
],
"fnDrawCallback": function () {
$('.field_1').editable( './editable_query.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]
The other way is to modify your initialisation of jEditable to use live events: http://stackoverflow.com/questions/4343109/jeditable-live#6059185 . Either way should work fine :-)
Regards,
Allan
Allan