on create, neither the X nor Create closes the modal

capeck

The issue started with the modal not showing at all. I am using webpack to build my vue app as well as bootstrap 5. I rearranged how libraries get loaded and now the modal for create shows. (Instead of importing bootstrap, I include it at the top of the app.) However, the create modal won't close. The 'X', Cancel nor Create buttons do anything. There is nothing in the console. It successfully creates a new record, so all the ajax calls appear to be working properly. ~~~~

I searched the forum but nothing seemed to be an answer.

the bootstrap include:

<!-- JavaScript Bundle with Popper -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>  

the editor setup code:

            vm.editor = new jQuery.fn.dataTable.Editor({
                "ajax": {
                    "url": "/php-api/table_shot_record.php",

                    data: function(d) {
                        d.shot_id = vm.shot_id
                    }

                },
                "table": jQuery("#shots"),
                idSrc: 'id',

                "fields": [
                {
                    label: "Time",  
                    name: "old_time"

                },
                {
                    "label": "Gun Name",  
                    "name": "gun",
                    type: "select",
                    separator: ",",
                    options: vm.gun_opts

                },
                {
                    "label": "Shot Name",  
                    "name": "shot",
                    type: "readonly"
                },
    .........


            ],
                  

            }); 

I'm using editor 2.0.5 and editor-bs5 2.0.3

Thanks for any help ./ ideas.

colin

I've not seen that before, but one thing to change is your table setting, that just needs to be

"table": "#shots",

If that doesn't work, could you post all the table initialisation code, please. Or check and see if there's any event handlers that would stop the close from happening/propagating,

Colin

capeck

The table change didn't work.
Here is my table initialization code:

            vm.dtHandle = jQuery("#shots").DataTable({
                dom: 'Bti',  
                order: [[1, 'asc']],
          
                columns: [  
                { data: null, defaultContent: '', className: 'select-checkbox dt-body-center text-center'},
                {  data: "old_time",   className: "dt-body-right", orderable: false},
                {  data: "gun",  orderable: false},
                {   data: "shot", orderable: false},
                {  data: "gunners",  orderable: false},
                {  data: "dud",  orderable: false,
                        render: function(data) {
       
                            if (data === true ) {
                                return '<input type="checkbox" checked disabled/>';
                            } else {
                                return '<input type="checkbox" disabled/>';
                            }
                        },
                        className: "dt-body-center text-center" 

                },
                {  data: "activity",  orderable: false,
                        render: function(data) {
                            if (data === true ) {
                                return '<input type="checkbox" checked disabled/>';
                            } else {
                                return '<input type="checkbox" disabled/>';
                            }
                        },
                        className: "dt-body-center text-center" 
                },
                {  data: "notes",  width: "35em"
                },

                { data: "date", visible: false },
                ],

                "ajax": {
                    "url": "/php-api/table_shot_record.php",
                    "data": function (d) {
                        d.shot_date = DateTime.fromJSDate(vm.wx_date).toLocaleString(DateTime.DATE_SHORT)
 
                    }
                },
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                searching: false,
                paging: false,
                info: false,
                keys: {
                    columns: ':not(:first-child)',
                    keys: [ 9 ],
                    editor: vm.editor,
                    editOnFocus: true
                }    ,   
                language: {
                    "zeroRecords": 'There are no shots recorded for today',
                    "emptyTable": 'There are no shots recorded for today'
                },
                buttons: [
                     {extend: 'create', editor: vm.editor,
                     formButtons: [     
                        { text: 'Cancel',
                        className: 'btn btn-light m-2',
                        action: function () { this.close(); } },
                        
                        { text: 'Create',
                        className: 'btn btn-primary',
                        action: function () { this.submit(); } }
                
                    ]},
                    { extend: "remove", editor: vm.editor } 

                ]

            });

I don't see any event handlers but will keep trying that route as well.

allan

I'm not seeing anything obvious there that would be causing the issue. Are you able to PM me a link to the page showing the problem so I can try to diagnose it?

Thanks,
Allan

capeck

I took out the bootstrap5 ( datatables.net-editor-bs5) and it is working.

I can work on recreating it a little later, need to get a test build out right now.

capeck

I reworked some of my build process and it is all working now. When I used the bootstrap bundle as a script instead of importing bootstrap in webpack that probably made the difference. Thanks for you help.