Button handling in Responsive modal header

pdekraker22

Description of problem:

Sorry I do not have a test case to offer, but this is an issue I came across. I am looking to add additional buttons to the header in the Responsive modal dialog. The trouble is way the the buttons are handled causes them to persist when they shouldn't. The responsive code takes the default modal header block, removes all the buttons inserts the provided header and appends buttons. When the only button is the close button this is fine. If however the user adds buttons in their custom header the result is that those buttons are also removed and appended on the next call. The modal dialog will look right on the first call, but duplicate buttons will be added on each subsequent call.

snippet from responsive.bootstrap5.js

_display.modal = function ( options ) {
    if (! modal) {
        modal = new _bs.Modal(_modal[0]);
    }

    return function ( row, update, render ) {
        if ( ! $.fn.modal ) {
            _original( row, update, render );
        }
        else {
            if ( ! update ) {
                if ( options && options.header ) {
                    var header = _modal.find('div.modal-header');
                    var button = header.find('button').detach();

                    header
                        .empty()
                        .append( '<h4 class="modal-title">'+options.header( row )+'</h4>' )
                        .append( button );
                }

                _modal.find( 'div.modal-body' )
                    .empty()
                    .append( render() );

                _modal
                    .appendTo( 'body' )
                    .modal();

                modal.show();
            }
        }
    };
};

I think the fix is easy, replace header.find('button').detach(); with header.find('button.btn-close').detach();

Or maybe I'm wrong and there is a different way to add buttons to the dialog ( I'm still new to JS and DataTables).

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin