Dropdown with MDB UI Kit 3.0.0


Topic: Dropdown with MDB UI Kit 3.0.0

hebeldark@outlook.fr asked 4 years ago

Hi,

i used on in page, 3 dropdown buttons (one in nav bar, and two in page)

i create my button code with javascript sometime in my page, the first button works but not the second in fact, only the firt button click allow the dropdown works Button 1 / Button 2 => i reload, if i click to button 2, button 1 doesn't work => i reload, if i click to button 1, button 2 doesn't work

if i copy sample code of dropdown in my php page, the dropdown menu doesn't stay open

if i use bootstrap 5 js and use data-bs-toogle, my buttons works with data-mdb-tooggle no

Even one time, when i use data-mdb-toggle in my button nav and sample code for two buttons, when i click on a button, the menu of two buttons is showing...

in my php page, i have

<div class="ml-2 dropdown" id="btn_requests_stored">
</div>

and my js code

 var structureRequestsStored = '<button class="btn btnSquare bg_color_amber-500 dropdown-toggle" type="button" id="dropdownMenuButtonRequestsStored" data-mdb-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' +
            '<i class="fa fa-hdd me-2" aria-hidden="true"></i>Requêtes stockées' +
            '</button>' +
            '<ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonRequestsStored">' +
            '<li><a class="dropdown-item" onclick="AddRequest()" >Ajout d\'une requête</a></li>';
        for (var i = 0, j = storedNames.length; i < j; i++) {
            structureRequestsStored += '<li><a class="dropdown-item" onclick="LoadRequest(\'' + storedNames[i].id + '\',\'' + storedNames[i].title + '\',\'requeststored\')"> - ' + storedNames[i].title + '</a></li>';
        }
        structureRequestsStored += '</ul>';

$("#btn_requests_stored").empty();
$("#btn_requests_stored").html(structureRequestsStored);

Grzegorz Bujański staff commented 4 years ago

Please create a snippet where we can reproduce this problem: http://mdbootstrap.com/snippets. I'll check what's going on.


hebeldark@outlook.fr commented 4 years ago

sorry i can't to use snippet in my company network


Grzegorz Bujański staff commented 4 years ago

I need a working example where this error occurs. I tried to recreate it. I added 3 dropdowns using the code you sent above, but everything works fine.


thx

anyway, i had stopped to use mdb5; i had mdb 4 with jquery and the migration is too expensive to change all components

i modify components, i use -mdb- ... but i have some troubles like dropdown or modal

thx ofr your answer


Krzysztof Wilk staff commented 4 years ago

Hi!

In the MDB4 jQuery, you don't have to use the data-mdb-attrs like you have to in MDB5. An initialization process is a little bit different and inits from MDB5 won't work in MDB4, there are separate packages.

Remember that you can check old documentation for working examples. You can find it here: https://mdbootstrap.com/docs/b4/jquery/components/dropdowns/ :)

Best regards


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
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: PC
  • Browser: Opera
  • OS: Win10 x64
  • Provided sample code: No
  • Provided link: No
Tags