Editor modal is not closing regardless of where I click. Bootstrap 5

tannernd

Hello,

I am using Bootstrap 5 and when I open an editor modal it will not close regardless of where I click. I have tried

• clicking off the modal
• clicking the close icon
• clicking the button

None of these clicks close the modal. I saw another post where someone was having the same issue with jQueryUI and it needed corrections in the downloaded files.

Please advise.

allan

Hi,

It appears to work okay here. Could you link to a page showing the issue so I can help debug it please?

Thanks,
Allan

tannernd

Hi Allan, I currently have it in a dev environment on my local network. Here is an example code block that I use to initialize a datatable and editor.

editorAddPmt = new $.fn.dataTable.Editor( {
        ajax: {'url':my_ajax_obj.ajax_url,
            type: "POST",
            data: {dp_action:'setAddPmt', table:'app_user_debt_add_pmt'},
            },
        table: "#addlpayments",
        idSrc:  'income_id',
        template: '#addl_pmt_modal',
        fields: [ {
                label: "Income ID:",
                name: "income_id",
                type: "hidden"
            },{
                label: "Income Item:",
                name: "item",
            },{
                label: "Group:",
                name: "group",
                data: "group_id",
                type: "select"
            },{
                label: "Frequency:",
                name: "frequency",
                data: "frequency",
                type: "select"
            }, {
                label: "Planned Amount:",
                name: "plan_amt",
                attr: {
                    type: "number",
                    step: ".01"
                } 
            },{
                label: "Power Payment Amt:",
                name: "add_debt_pmt",
                attr: {
                    type: "number",
                    step: ".01"
                } 
            },{
                label: "Next Date:",
                name: "next_date",
                type: "datetime",
                attr: {
                        min:moment().format('YYYY-MM-DD')
                    },
                def:moment().format('YYYY-MM-DD')
            }, {
                label: "User ID",
                name: "userid",
                type: "hidden",
                def: php_vars.userid
            }
        ]
    } );
     
    var tableAddPmt = $('#addlpayments').DataTable( {
        dom: "Bfrtip",
        ajax: {'url':my_ajax_obj.ajax_url,
            type: "POST",
            data: { action : 'get_datatables_addl_pmt'},
            }, 
        paging: false,
        language: {
            "emptyTable": "Click New to add an Income."
          },
        columns: [
            
            { data: "income_id" },
            { data: "item" },
            { data: "plan_amt", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) },
            { data: "add_debt_pmt", render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) }
            
        ],
        columnDefs:[{ "visible": false, "targets": [0] }],
        select: true,
        paging: false,
        searching: false,
        ordering: false,
        info:false,
        buttons: [
            { extend: "create", 
                text:'<div class="debt-icons"><i class="fa fa-plus-circle"></i></div>', 
                editor: editorAddPmt,
                formTitle:'Enter an Additional Payment',
                formMessage:'Enter an additional payment that you can apply to your debt.',
                formButtons:'Add Payment' },
    
            { extend: "edit", 
                text:'<div class="debt-icons"><i class="fa fa-edit"></i></div>',     
                editor: editorAddPmt,
                formTitle:'Change an Additional Payment',
                formMessage:'Change the additional payment information.',
                formButtons:'Change Payment'  }
        ],
        "initComplete": function(settings, json) {
            setupDone = true;           
          }
    } );
   
    editorAddPmt    
    .on( 'submitSuccess', function( e, json, data ) {
        get_debt_summary();
        $('#payoffMethod').val(0);
        tableAddPmt.ajax.reload( null, false );
        lowBalPayoff.ajax.reload( null, false );
        highIntPayoff.ajax.reload( null, false );
        
    } ).on( 'onInitEdit', function () {
        editorAddPmt.disable('item');
        editorAddPmt.hide('group');
        editorAddPmt.hide('frequency');
        editorAddPmt.disable('plan_amt');
        editorAddPmt.hide('next_date');
    } ).on( 'onInitCreate', function () {
        editorAddPmt.enable('item');
        editorAddPmt.show('group');
        editorAddPmt.show('frequency');
        editorAddPmt.enable('plan_amt');
        editorAddPmt.show('next_date');
    } ).on( 'open', function ( e, mode, action ) {
        $('div.DTED').find('div.modal-dialog').addClass('modal-dialog-slideout');
    } ).on( 'preSubmit', function ( e, mode, action ) {
        var plannedAmt = this.field( 'plan_amt');
        var addDebtAmt = this.field( 'add_debt_pmt');
        var plannedAmtVal = parseFloat(plannedAmt.val());
        var addDebtAmtVal = parseFloat(addDebtAmt.val());
        if ( plannedAmtVal < addDebtAmtVal ) {            
            addDebtAmt.error( 'Value must be less than Planned Amount' );                           
        }   
        var item = this.field( 'item');
        if ( item.val() == '' ) {            
            item.error( 'Please enter an item name' );                           
        }  
        if ( this.inError() ) {
            return false;
        }
    } );

Please let me know what additional information I can provide.

allan

There is nothing similarly obvious there I'm afraid. I'd need to be able to debug the application I think.

For example, does preSubmit trigger? Or is there a background element that has a higher z-index? Or there might be something else I've not thought of.

Allan