Topic: Input Mask, Datatables are not working in dynamic templates
Hi ,
We are using MDB bootstrap-mdb/plugins/js/all.min.js and bootstrap-mdb/js/mdb.umd.min.js. If we use it with static pages it works very well.
We're using dynamic templates to render the contents so we manually init the component via javascript. In the latest version (version 7.0.0) widgets are not loading properly. The following code snippet is the ref. for how we init the components using js:
Input mask:
const ele = document.querySelectorAll('[data-mdb-input-mask-init]')
ele.forEach((ele) => {
mdb.InputMask.getOrCreateInstance(ele)
});
Datatables:
const datatabels = document.querySelectorAll('[data-mdb-datatable-init]')
datatabels.forEach((datatabels) => {
mdb.DataTabel.getOrCreateInstance(datatabels)
});
For the above snippets, we're getting Uncaught TypeError: Cannot read properties of undefined (reading 'getOrCreateInstance')
Current behavior: 1. Input mask widget loaded as basic input without the mask. 2. Table loaded without pagination.
The InputMask plugin does not have a getOrCreateInstance method.
You can use code like this:
const ele = document.querySelectorAll('[data-mdb-input-mask-init]')
ele.forEach((ele) => {
let instance = Inputmask.getInstance(el)
if (!instance) {
instance = new Inputmask(el);
}
});
Also note that plugins are not enclosed in the mdb namespace. So unless you added InputMask to mdb yourself, the mdb object will not contain this plugin. It looks like we also have an error with the plugin name. Something went wrong during the build. For now, use the class name Inputmask. We will fix it as soon as possible.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.0.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: No
- Provided link: Yes