Topic: Init components with vanilla js

Bostjan Tittl priority asked 1 month 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


Kamila Pieńkowska staff answered 1 month ago


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 1 month 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 1 month 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 1 month ago

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



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: Priority
  • 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