Tricking editor for a custom button with confirmation

pisisler

Hi all.

Sometimes you might need a custom button, for which the Editor provides a nice and easy way; but sometimes you need to ask for a confirmation before proceeding. Editor doesn't support this natively. There is formMessage in button options and there is message() as well as message in form-options. But as you know, these methods/options require the Editor be opened. So if you are not showing an editor window, you can't ask for a cuonfirmation in your custom button using native methods.

You need to "trick" the Editor into this. There are three methods which you can accomplish this.

1) Starting a remove action which ends up as an edit. I have built my own way first, but then I realized this could be easier when I was looking around the forum. You know "remove" action already has a confirmation feature by default which the edit action lacks if you are not showing the editor window. Here is how:

{
    extend: "edit",  editor: editor,
    text: "Fire Staff",
    action: function (e, dt, node, config) {
        // Trick the Editor by starting an edit first, otherwise val() wouldn't work.
        editor.edit(dt.rows({selected: true}).indexes(), false);

        // Now start the remove action to show a confirmation
        editor.remove(dt.rows({selected: true}).indexes())
            // Ask the user for a confirmation now
            .message('Are you sure you want to fire this staff?')
            // Set the fields without user interaction
            .val({
                active: 0,
                salary: 0,
                position: 'fired',
            }).buttons('Proceed')
            // Finally, turn this into an edit action, which will submit the form which started at the very first editor.edit()
            .mode('edit');
    }
}

That's all. (A note: there must be a bug in Markdown here. There shouldn't be a syntax error although it looks like there is.)

2- Another way to "trick" the Editor is to use a custom template. See template() documentation for details. You prepare a custom template which in fact has no fields (that makes it a trick). Then set this template with the custom button, like this:

// Your template selectors. One for default, one for tricking
var editor;
var customTemplate = $('#fire-staff-edit-template');
var defaultTemplate = $('#normal-editor-template');

editor = new $.fn.dataTable.Editor({
    // Your default "custom" template
    template: '#normal-editor-template',
.....
{
    extend: "edit", editor: editor,
    // Your "normal" edit action needs to be customized too
    action: function (e, dt, node, config) {
        editor.template(defaultTemplate);
        editor.edit(dt.rows({selected: true}).indexes(), {
            title: 'Edit Title',
            buttons: {
                text: 'Save' // Or table.i18n('editor.edit.submit') if you are using language JSON
                action: () => { editor.submit(); }
            }
        }).mode('edit');
    }
},
{
    extend: "edit",  editor: editor,
    text: "Fire Staff",
    // This is our custom button, having exactly same content with normal edit button except the template and message
    action: function (e, dt, node, config) {
        editor.template(customTemplate);
        // Now show the confirmation like form info. (This is an "empty" for actually, which you prepared in #fire-staff-edit-template
        editor.message('Are you sure you want to fire this staff?');
        editor.edit(dt.rows({selected: true}).indexes(), {
            title: 'Fire Title',
            buttons: {
                text: 'Yes, Sure'
                action: () => { editor.submit(); }
            }
        }).val({
            active: 0,
            salary: 0,
            position: 'fired',
        }).mode('edit');
    }
},

3- This one is actually not a trick but a native way, which I had done at first but then the first two options tempted me. I am using Bootstrap modal for a confirmation in this example; but you can change it per your wish.

You first need to have a modal element in your DOM. See Bootstrap Modal documentation. Mind your own Bootstrap version. Or see modal options of your display controller. (See DataTables available display controllers. Of course you can use a very different custom method too.)

After inserting a modal element into the DOM (for example I called mine "infobox"), you will also need a custom function to show this modal. Like:

function infobox(msg, type, callback) {
    // Remove the previous event handlers from confirm button.
    let confirm_button = $('#infobox #modal-confirm');
    confirm_button.off('click');

    // Decorate the modal according to the modal "type".
    $('#infobox div#modal-body').attr('class', 'alert alert-' + type).html(msg);
    $('#infobox span#modal-title').html('Title'/* You can use variables by "type" here too */);

    // Confirmation when clicked on the confirm button
    confirm_button.on('click', () => { callback(true); });

    // Show the modal with your own options
    $('#infobox').modal({backdrop: true, show: true});
    $('.modal-dialog').draggable({opacity: 0.50, handle: ".modal-header, .modal-footer"});
}

Now in your custom button;

{
    extend: 'edit', editor: editor,
    text: 'Fire Staff', // Or (dt) => dt.i18n('custom.string') if you are using language JSON
    action: function (e, dt, node, config) {
        infobox('Are you sure you want to fire this staff?', 'info', function (confirm) {
            if (confirm) // User clicked the confirm button
                editor.edit(dt.rows({selected: true}).indexes(), false).
                val({
                    active: 0,
                    salary: 0,
                    position: 'fired',
                }).submit(
                    // Hide the modal after submission
                    () => { $('#infobox').modal('hide'); }
                );
        });
    }
}

allan

Excellent! Most people normally stop at the first one that works for them, but this is a pleasure to read over and see how you are working with the Editor API. The final option is my preferred option!

There is one final option to add to the list - you can use preSubmit top stop a submission. So the first time you submit a form it would check for a flag and if false, throw up the confirmation message. If confirmed, set the flag and then submit the form again - this time the preSubmit handler will see the confirmed flag and allow the submission to go through. That's an approach I've used myself quite a few times.

Allan