Topic: Init components with vanilla js
Hi there,
I’m dynamically loading content using vanilla JavaScript, and I’m encountering an issue where MDB form components (such as text inputs, number fields, textareas, etc.) are not displaying correctly after being loaded. Could you please advise on how to properly initialize these components after they are dynamically inserted into the DOM?
Thank you in advance!
Best regards, Bostjan
Even if you add input fields after they page load you need to make sure the have init attribute data-mdb-input-init.
After that you nee to perform initiation.
I've created example snippet for you: https://mdbootstrap.com/snippets/standard/kpienkowska/6227766
Kevin Johr pro premium priority commented 4 months ago
Thank you for the quick reply. That works. But what about the file upload, for example? The data-mdb-file-upload-init is used for this and as far as I have tested it, mdb.Input or mdb.Select does not work here.
Kamila Pieńkowska staff commented 4 months ago
In the API tab of every component you can find Usage section that list initiation methods.
https://mdbootstrap.com/docs/standard/plugins/file-upload/#api-section-usage
Kevin Johr pro premium priority commented 4 months ago
Ah thank you, now I have understood the procedure. Many thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.2
- Device: PC
- Browser: Chrome
- OS: Win 11
- Provided sample code: No
- Provided link: No