Topic: How to apply initMDB to appended DOM.
Hi Team,
Could you please teach me how to apply initMDB to appended DOM via js?
Regards,
Then you need to import initMDB and needed Components and run it with Components as arguments e.g.
import { Dropdown, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Dropdown, Ripple });
It's best to do add this at the begging of the JS file or scrtipt tag in your HTML file and perform regular JS init after you append new content.
Omiya pro commented 7 months ago
I tried this.
It works for the DOM existing from the page loading.
The question is how it works for the DOM which appended by Javascript. I tried the same code for appended DOM but it didn't work.
Hence, I currently using the code like below.
const initializeOutline = () => { $(".form-outline:not(:has(.form-notch))").each((i, e) => { new mdb.Input(e).init(); }); };
I am not too positive if this is the right way.
Regards,
Kamila Pieńkowska staff commented 7 months ago
Yes it is - that's what I meant by "regular JS init after you append new content".
Do you use es modules? initMDB method is needed only in this case.
For umd import you initiate components with JS init. Every component and plugin have example of JS init in the API tab.
Omiya pro commented 7 months ago
Do you use es modules?
Yes I do.
Just started integrating ES module into my existing projects.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: MAC
- Browser: Google Chrome
- OS: iOS
- Provided sample code: No
- Provided link: No