Confirm save changes after reorder

Confirm save changes after reorder

nhughes552nhughes552 Posts: 7Questions: 2Answers: 0

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);
    });

Answers

  • allanallan Posts: 46,556Questions: 1Answers: 6,497 Site admin

    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

  • nhughes552nhughes552 Posts: 7Questions: 2Answers: 0

    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?

  • allanallan Posts: 46,556Questions: 1Answers: 6,497 Site admin

    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

  • nhughes552nhughes552 Posts: 7Questions: 2Answers: 0

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

  • allanallan Posts: 46,556Questions: 1Answers: 6,497 Site admin

    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

  • allanallan Posts: 46,556Questions: 1Answers: 6,497 Site admin

    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

  • nhughes552nhughes552 Posts: 7Questions: 2Answers: 0

    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

  • allanallan Posts: 46,556Questions: 1Answers: 6,497 Site admin

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

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

    Allan

  • allanallan Posts: 46,556Questions: 1Answers: 6,497 Site admin

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

Sign In or Register to comment.