Topic: Dropdown with MDB UI Kit 3.0.0
hebeldark@outlook.fr free asked 3 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);
hebeldark@outlook.fr free answered 3 years ago
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 3 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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
Grzegorz Bujański staff commented 3 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 free commented 3 years ago
sorry i can't to use snippet in my company network
Grzegorz Bujański staff commented 3 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.