General Question: Has anyone implemented 'click row to open edit modal'?

I’m working on removing the ‘Edit’ button from the interface so that the user just needs to click on a row and have it open the edit modal. So far, I’ve done the following:

• Removed the ‘Edit’ button from the DOM by not declaring dom: 'Bfrtip' in my datatable configuration.
• Determined the selected row and called openEditModal():

$("[id^='my_datatable_'] tbody").on( 'click', 'tr', function () {
        var tableID = $(this).closest('table').attr('id');    // id of the table, e.g., my_datatable_123
        theDataTable.row(':eq(0)', { page: 'current' }).select();
        $( '#'+tableID )[0].altEditor._openEditModal();
});

The above code opens the edit modal, pre-filled with the datatable data. However, when I edit a field/form input, the changes are not being saved. If I remove my row-click selection functionality and just use AltEditor as designed, my SQL/database code is working and the updates are saved so clearly I’m missing something.

Has anyone implemented a ‘click a row to open an AltEditor modal’? I’m looking for code to review to see if I can determine where I’m going wrong. Thanks.

[luca-vercelli]

You can try this:

$(document).delegate("[id^='my_datatable_'] tbody", 'click', 'tr', function () {

    var tableID = $(this).closest('table').attr('id');    // id of the table
    var that = $( '#'+tableID )[0].altEditor;
    that._openEditModal();
    $('#altEditor-edit-form-' + that.random_id)
                .off('submit')
                .on('submit', function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    that._editRowData();
                });
});

$(document).delegate(...) is performed after on('click', ...) , so row is already selected

[cdixson]

Thanks again @luca-vercelli

The $(document).delegate code above works perfectly in my application.