Topic: Modal Not Triggering when Clicking Button
DiStefano
premium
asked 1 week ago
Hi Support,
I am having an issue in my .NET 8 application with the Modal and Datepicker. My assumption is an incorrect importing of MDB. I'm using Visual Studio 2022 and I brought in the "mdb.pro.js" and the "mdb.min.css".
Using the example Modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-mdb-ripple-init data-mdb-modal-init data-mdb-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-ripple-init data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-ripple-init data-mdb-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Save changes</button>
</div>
</div>
</div>
</div>
When I click the button to fire the modal, nothing happens. I also tried the Datepicker, I get the style, but no calendar to click on to select a date.
It appears it doesn't seem to like any of the attributes:
data-mdb-ripple-init data-mdb-modal-init data-mdb-target=...
However, if I do the original Bootstrap Modals or Datepickers, they seem fine, yet the MDB classes seem to work, it's just not liking the MDB javascript.
Is this an issue with importing MDB into my web application? I don't see any complaints in the console.
Thanks
Kamila Pieńkowska
staff
answered 1 week ago
You are using version 6.4.0 so you need to use legacy documentation. Initiation method changed so you use new syntax with old package which are not compatible.
Here is link to the legacy documentation you need: https://v5-standard-6.legacydocs.mdbootstrap.com/docs/standard/components/modal/
DiStefano premium commented 6 days ago
Thanks Kamila, I updated to Essentials Pro 8.2. But now of course it broke all kinds of fun stuff, which I expected."Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')" after putting the js source "src="js/mdb.umd.min.js"" in my layout.
DiStefano premium commented 6 days ago
Kamila, disregard above comment. It was an issue with the spinner, it was still using the old one. I am good now. Thanks again.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.4.0
- Device: Desktop
- Browser: Chrome/Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: No