on 'open' event for all editors

on 'open' event for all editors

Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

I have several editors on a single page and want to modify each with the open:

var editor_1 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

var editor_2 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

var editor_3 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
}).on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

Is there a way to do a single open for any and all instances of editors that open on that page?

Something like:

var editor_1 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
})

var editor_2 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
})

var editor_3 = new $.fn.dataTable.Editor( {
    ... Blah Blah Blah ...
})

any_and_all_editors.on( 'open', function ( e, mode, action ) {
    $(".modal-dialog").addClass("modal-xl")
})

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin
    Answer ✓

    There isn't like that, but you can at least share the function between them:

    function editorOpen(e, mode, action) {
      $(".modal-dialog").addClass("modal-xl");
    }
    
    editor_1.on('open', editorOpen);
    editor_2.on('open', editorOpen);
    editor_3.on('open', editorOpen);
    

    However, there is a better option. The same modal is shared between them all, so you only need to add it once. Of course you might not be sure which one will be opened first, but you can use displayNode() to get the modal container. So after editor_1 initialisation:

    $('div.modal-dialog', editor_1.displayNode()).addClass('modal-xl');
    

    will do it. Or even better, use the classes property of the Bootstrap controller for Editor:

    DataTable.Editor.display.bootstrap.classes.modal = 'modal-xl modal-dialog-scrollable modal-dialog-centered';
    

    I'd go with the last option, but there is more than one way of doing this :)

    Allan

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    Thanks @allan, that's good for the modal but I was actually hoping to do a few other things as well (I shortened the code in my original question for brevity, but unfortunately lost some of the detail I should have captured!):

    var editor_1 = new $.fn.dataTable.Editor( {
        ... Blah Blah Blah ...
    }).on( 'open', function ( e, mode, action ) {
        $(".modal-dialog").addClass("modal-xl")
        $(".col-form-label").addClass("text-info-emphasis")
        $(".form-control").addClass("fw-bold")
    })
     
    var editor_2 = new $.fn.dataTable.Editor( {
        ... Blah Blah Blah ...
    }).on( 'open', function ( e, mode, action ) {
        $(".modal-dialog").addClass("modal-xl")
        $(".col-form-label").addClass("text-info-emphasis")
        $(".form-control").addClass("fw-bold")
    })
     
    var editor_3 = new $.fn.dataTable.Editor( {
        ... Blah Blah Blah ...
    }).on( 'open', function ( e, mode, action ) {
        $(".modal-dialog").addClass("modal-xl")
        $(".col-form-label").addClass("text-info-emphasis")
        $(".form-control").addClass("fw-bold")
    })
    

    It seems the editorOpen function might be the best given the other things I'm trying to do.

    Thanks!

  • allanallan Posts: 62,099Questions: 1Answers: 10,183 Site admin
    Answer ✓

    Agreed - a shared function would be best in this case.

    Allan

  • Loren MaxwellLoren Maxwell Posts: 387Questions: 94Answers: 10

    My ultimate solution was to use the initEditor to attach an open to each new instance of Editor:

    $(document).on( 'initEditor', function ( e, inst ) {
        // Attach an 'open' event to all Editors
        inst.on( 'open', function () {
            // Perform some formatting or whatever
        });
    });
    
Sign In or Register to comment.