Confirm save changes after reorder

nhughes552

Hi

I have the RowReorder plug-in working fine with the Editor. However, I want to confirm the changes before updating the database. I have added a confim in the editor preSubmit event and this works of if I click OK. But if I click cancel the page loses the RowReorder ability i.e. the page no longer allows drag and drop of rows.

Any ideas?

    editor = new $.fn.dataTable.Editor({
        ajax: '/api/admin/getFellowsPrecedence',
        table: '#tblFellowsPrecedenceTable',
        fields: [
            {
                label: 'FellowsPrecedence:',
                name: 'FellowsPrecedence',
                fieldInfo: 'This field can only be edited via click and drag row reordering.'
            },
            {
                label: 'DisplayName:',
                name: 'DisplayName'
            }


        ]
    });

    var fellowsPrecedenceTable = $('#tblFellowsPrecedenceTable').DataTable({
        // rowId: "PersonID",
        "paging": false,
        "ordering": true,
        "searching": false,
        "autoWidth": false,
        rowReorder: {
            selector: 'span.reorder',
            dataSrc: 'FellowsPrecedence',
            editor: editor,
            update: true
        },

        columns: [
            {
                data: null,
                defaultContent: '<span class="reorder"><i class="fa fa-arrows" aria-hidden="true"></i></span>'
            },
            { data: "FellowsPrecedence" },
            { data: "DisplayName" },
            {
                data: "PersonID",
                "render": function (data) {
                    return '<a target="_edit" href=/People/Details/' + data + '>Edit</a>';
                },
                className: "dt-body-center"
            }
        ],
        "order": [[1, 'asc'], [2, 'asc']],
        "columnDefs": [
            { "orderable": false, "targets": [0, 3] }
        ]
    });


    // Event handlers

    editor.on('preSubmit', function () {

        if (!confirm("Save changes!")) {
            return false;
        }
        return true;
    });

    fellowsPrecedenceTable.on('row-reorder', function (e, diff, edit) {

        var result = 'Reorder started on row: ' + edit.triggerRow.data()['DisplayName'] + '<br>';

        for (var i = 0, ien = diff.length; i < ien; i++) {
            var rowData = fellowsPrecedenceTable.row(diff[i].node).data();

            result += rowData['DisplayName'] + ' updated to be in position ' +
                diff[i].newData + ' (was ' + diff[i].oldData + ')<br>';
        }

        $('#result').html('<h3>Event result:</h3><br>' + result);
    });

allan

Its the code in this chain that is causing the issue. When you cancel the preSubmit event it means that it can't enter into the submitComplete event handler to re-enable RowReorder.

Cancelling preSubmit doesn't actually trigger any other events - normally the form would be visible, but that isn't the case with RowReorder.

I'm going to have to have a bit of a think about what the right way of handling this is I'm afraid.

Allan

nhughes552

Hi Allan

Thanks for looking at it and the explanation. So it's not anything I'm doing wrong as such - just the way the code works currently works?

allan

Yes - its a bit of a hole in the current implementation. The best I've thought of so far is to provide a preSubmitCancelled event, but it seems a bit inelegant...

Allan

nhughes552

Is there anything I can do in my code to re-enable the RowReorder in the confirm cancel action?

allan

Not really - the issue is that Editor isn't releasing its event listeners.

I've not been able to think of a better solution than preSubmitCancelled so I'll implement that for the 1.7.3 release.

Allan

allan

I've just committed the change needed for RowReorder, and also have committed the changes need for Editor to allow this to operate as expected when preSubmit is used to cancel submission.

I'll be tagging and releasing Editor 1.7.3 this afternoon.

Allan

nhughes552

Hi Allan

Sorry hadn't realised you had managed to have a look at this.

I've just picked it up again downloaded latest version but not sure how to correctly implement the confirmation! Would it be possible for you to do an example?

Regards

Nige

allan

In this example run the following in your browser's console:

editor.on('preSubmit', function () {
  return false;
} );

Allan

allan

Its possible you might need to reload the page - I had a cached version of the old page which didn't have the fix!