Topic: How to apply initMDB to appended DOM.

Omiya pro asked 3 months ago


Hi Team,

Could you please teach me how to apply initMDB to appended DOM via js?

Regards,


Kamila Pieńkowska staff answered 3 months ago


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 3 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 3 months ago

Yes it is - that's what I meant by "regular JS init after you append new content".


Kamila Pieńkowska staff answered 3 months ago


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 3 months ago

Do you use es modules?

Yes I do.

Just started integrating ES module into my existing projects.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags