Topic: Dynamic HTML generated dropdown do not work
Alexis Comte priority asked 9 months ago
Expected behavior
Dropdown is working
Actual behavior
dropdown is not working
Resources (screenshots, code snippets etc.)
see demo on https://www.affection.org/test/mdb.html
Alexis Comte priority answered 9 months ago
I found an other bug
When you have 2 differents generated dropdowns, this is not working , the second dropdown show the menu of the first
exemple with my snipped :
https://mdbootstrap.com/snippets/standard/alexis_comte/5991105
Kamila Pieńkowska staff commented 9 months ago
You should initialize dropdown like this
dyn.querySelectorAll('[data-mdb-dropdown-init]').forEach((d) => { const instance = mdb.Dropdown.getOrCreateInstance(d) });
Alexis Comte priority commented 9 months ago
THANKS this is working
uniagro premium answered 9 months ago
Hello,
you have to initializate the dropdown after setting the HTML content:
- · Create an instance object
- · Call the
update
method
See the updated snippet:https://mdbootstrap.com/snippets/standard/uniagro/5991153
Alexis Comte priority commented 9 months ago
Thanks a lot, I think there is a problem with the URL of the snippet, I get a 404 error
Alexis Comte priority commented 9 months ago
I tried your solution but I get a javascript error
manipulator.js:70 Uncaught TypeError: Cannot read properties of null (reading 'classList') at Object.addClass (manipulator.js:70:25) at Ps._showPlaceholder (input.js:188:17) at Ps._getLabelData (input.js:131:12) at Ps.init (input.js:78:10) at new Ps (input.js:55:12) at m.html:59:33 at HTMLCollection.forEach () at CreateDrop (m.html:59:10) at HTMLButtonElement.onclick (m.html:44:32) addClass @ manipulator.js:70 _showPlaceholder @ input.js:188 _getLabelData @ input.js:131 init @ input.js:78 Ps @ input.js:55 (anonymous) @ m.html:59 CreateDrop @ m.html:59 onclick @ m.html:44
I wrote this way :
document.querySelectorAll('.dropdown').forEach((element) => { new mdb.Input(element).update(); });
Alexis Comte priority commented 9 months ago
I have updated the snippet , not working
https://mdbootstrap.com/snippets/standard/alexis_comte/5991105#html-tab-view
I would really like to see your snippet
Alexis Comte priority commented 9 months ago
I have updated the snippet , not working
https://mdbootstrap.com/snippets/standard/alexis_comte/5991105#html-tab-view
I would really like to see your snippet
uniagro premium commented 9 months ago
Sorry, it seems that the snippet wasn't public. Try now.
Alexis Comte priority commented 9 months ago
THANKS it is working !!!
Kamila Pieńkowska staff commented 9 months ago
I will just add that updating instance is not necessary. Using new
constructor is enough. Other than that solution prvided by uniagro is good.
Alexis Comte priority commented 9 months ago
I found an other bug
When you have 2 differents generated dropdowns, this is not working , the second dropdown show the menu of the first
exemple with my snipped :
https://mdbootstrap.com/snippets/standard/alexis_comte/5991105
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
Alexis Comte priority commented 9 months ago
see snippet on
https://mdbootstrap.com/snippets/standard/alexis_comte/5991105