Updating datatables- Error Cannot Read Properties of undefined (reading 'Modal')

fcampbell

We are in the process of updating to datatables v1.13.4 with bootstrap 5 and all relavent plugins in our project. The table displays correctly but when clicking New or edit we receive "Error Cannot Read Properties of undefined (reading 'Modal')" instead of the familiar editing popup. We have jquery 3.7 and bootstrap 5.2.2. These are loaded before datatables.js and we do not have duplicate calls. We are upgrading from v1.10.15. This version works with the new jquery and bootstrap. Once we update to the current version of datatables, we get the cannot read error. Any help would be greatly appreciated.

allan

Are you able to give me a link to your page (or perhaps PM it to me if you can't make it public)? It sounds like the Bootstrap Javascript might not be getting loaded, but I'd need to be able to see the page to say for sure.

Allan

fcampbell

Thank you for your quick response. I am sending you a PM now with the website and login info.

larav

Hi Allan I get this same error when I try to use Editor in Vue, please if you have answered it may you share it here?

larav

I also forgot to mention something,

I do not use the datatables.net-vue component. I just started it from scratch and this is my arrangement of imports:

<template>    
      <div class="card-block p-0" v-once>
             <table id="datatable" class="table table-striped">

              </table>
       </div>
</template>

import "datatables.net";
import DataTable from "datatables.net-bs5";
import "datatables.net-buttons";
import "datatables.net-buttons-bs5";
import "datatables.net-select-bs5";
import "datatables.net-editor";
import Editor from "datatables.net-editor-bs5";

export default {
    name: "Index",
    data() {
        return {
            data: [
                {
                    "DT_RowId": "row_1",
                    "id": 1,
                    "name":"Musa"
                },
                {
                    "DT_RowId": "row_2",
                    "id": 2,
                    "name": "Steven"
                }
            ]
        }
    },
    mounted() {
        const editor = new Editor({
            data: this.data,
            table: "#datatable",
            fields: [
                {
                    label: "ID",
                    name: "id"
                },
                {
                    label: "Name",
                    name: "name"
                }
            ]
        });

        const table = new DataTable("#datatable", {
            columns: [
                {
                    title: "ID",
                    data: "id"
                },
                {
                    title: "NAME",
                    data: "name"
                }
            ],
            data: this.data,
            lengthChange: true,
            select: true,
        });

        new DataTable.Buttons(table, [
            {extend: "create", editor: editor},
            {extend: "edit", editor: editor},
            {extend: "remove", editor: editor}
        ]);

        let insertPoint = table.table().container().querySelectorAll('.col-md-6')[0];
        table.buttons().container().appendTo(insertPoint);
    }
}
</script>

<style scoped>

</style>

allan

As I mentioned in my previous reply in this thread, I'd need a link to a test case showing the issue please.

Allan