Topic: Dynamic HTML generated dropdown do not work

Alexis Comte priority asked 10 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 commented 10 months ago

see snippet on

https://mdbootstrap.com/snippets/standard/alexis_comte/5991105


Alexis Comte priority answered 10 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 10 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 10 months ago

THANKS this is working


uniagro premium answered 10 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 10 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 10 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 10 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 10 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 10 months ago

Sorry, it seems that the snippet wasn't public. Try now.


Alexis Comte priority commented 10 months ago

THANKS it is working !!!


Kamila Pieńkowska staff commented 10 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 10 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



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.1.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes