Help with a CRUD

Apocao

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!!

Apocao

Anyone got any ideas? I'm freaking out about this problem

fbas

Can you provide a link?

Apocao

http://www.spro.com.br/fernando/editable.php -> Here's the link

allan

The problem is that you are only making the elements that are in the table initially editable - not any that you add thereafter. Have a look at your page with Visual Event ( http://www.sprymedia.co.uk/article/Visual+Event+2 ) after you add a new row - you'll see that there isn't an event handler on the new row - hence the problem!

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

Spro

Thanks Allan! this solved this problem.. I'll work some more around that example and see if any onther problems appear!

allan

Excellent to hear - thanks for the feedback :-)

Allan