Init components with vanilla js

Topic: Init components with vanilla js

Bostjan Tittl priority asked 3 months ago

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

Add comment

Kamila Pieńkowska staff answered 3 months ago

2 0 Best answer

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

Ah thank you, now I have understood the procedure. Many thanks!

Add comment