Get the edited data from an inline edit before the data is submitted to the server

Creedboy56

Hi guys,

I have a problem when using datatables editor. Essentially I need to have a copy of the data before and after an inline edit is made to log the change that was made (this will be done seperately). I can get the data before an edit is done, however when trying to grab the new data that is sent by editor when .submit() is called is where I am getting problems. The code below should hopefully help explain what I am trying to accomplish).

//click the cell in the table you wish to edit with inline
$('#oTable').on('click', 'tbody td', function () {
            
//store the old data before edit takes place
            var oldData = oTable.cell(this).data();

//call inline on the cell to allow editing
            oEditor.inline(this, {
                submit: 'changed',
                scope: 'cell',
                buttons: {
                    label: '- >',
                    action: function () {

                   //get the new data that has been edited (doesnt work)
                        var newData = this.data();

                    //pass the old and new data to a separate function to update on backend
                        UpdateTable(oldData, newData);
                    }
                }
            });
        });

Essentially I want to make use of the inline UI but hijack the data so I can perform my own custom update. Is it possible to access the modified table data before submission and if so how would you access it. I have looked at the object that is created when inline is called but can find no reference to the new data. Any help would be appreciated, many thanks

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

There is no data() method in Editor - I think val() is what you would want there.

However, I wonder if you might be better using the preSubmit event. That way you don't need to mess around with custom buttons and the like - it would be called for every submission, regardless of whether is was an inline edit, a full row create, or whatever.

If you are doing your own custom update, the way to do that is to hijack the ajax option (as a function). Example of that here.

Allan

Creedboy56

Thank you great overseer @allan I have managed to crack it with your advice and use of the displayed() api. to get the value of the field in the cell. Below is the working version. Many thanks

$('#oTable').on('click', 'tbody td', function () {

            oldData = oTable.cell(this).data();
            

            oEditor.inline( this );

        });

        oEditor.on('preSubmit', function (event, obj, action) {

            if (action === 'edit') {

                //console.log(oEditor.displayed(this));
                //console.log(oEditor.field(foundField).val());

                changedField = oEditor.displayed(this)[0];
                newData = oEditor.field(changedField).val();

                UpdateLog(oldData, newData, changedField);


                return false;
            }
        });

colin

We need to get Allan a business card with the title as "The Great Overseer"

Glad all sorted, thanks for reporting back,

Colin

allan

I could get behind that idea...