How to prompt user before close of editor modal?

How to prompt user before close of editor modal?

jibranbjibranb Posts: 8Questions: 3Answers: 1

Hello. I would like to display a prompt to user before close of editor modal.

I've tried attaching to the editor "close" event, but modal closes right away.

    editor.on( 'close', function ( e ) {
        e.preventDefault();     
        return confirm( 'Are you sure you want to close?' );
    });

Any help greatly appreciated.

This question has accepted answers - jump to:

Answers

  • jibranbjibranb Posts: 8Questions: 3Answers: 1
    edited September 2017 Answer ✓

    I figured it out! Had to add a cancel button and my own handler to the modal form.

    $( '#contacts_list' ).DataTable( {
    ...
            buttons: [
                { 
                    extend: "create", 
                    editor: editor,
                    formButtons: [
                        { label: 'Cancel', fn: function () { 
                            if( confirm( 'Are you sure?' ) ) {
                                this.close();
                            }
                        } },
                        { label: 'Create', className: 'btn btn-primary', fn: function () { 
                            this.submit();
                        } }
                    ]
                },
                { 
                    extend: "edit",
                    editor: editor,
                    formButtons: [
                        { label: 'Cancel', fn: function () { 
                            if( confirm( 'Are you sure?' ) ) {
                                this.close();
                            }
                        } },
                        { label: 'Update', className: 'btn btn-primary', fn: function () { 
                            this.submit();
                        } } 
                    ]
                },
                { extend: "remove", editor: editor }
            ],
    ...
        } );
    

    Then I had to hide the close button (x) in the modal header via CSS (SASS) so it wouldn't circumvent the new handler. Maybe there's a better way to do this part--ideas welcome.

    .DTE_Header {
    
        button.close {
            display: none;
        }
    
    }
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    Thanks for posting back - that looks good. You could also use the onBlur option of form-options which is cancellable.

    Allan

This discussion has been closed.