Topic: MDB5 Modal not working with Fontawesome Icon
stern.peter.78 free asked 3 years ago
**Expected behavior**A Modal should open, if I click on a button. Then an event (Javascript) should modify the modal while showing modal**Actual behavior**If I click directly on the icon, the modal open, but the event (Javascript) didn't start and an error occurs:
mdb.min.js:306 Uncaught TypeError: Illegal invocation at Object.findOne (mdb.min.js:306) at new i (mdb.min.js:312) at i. (mdb.min.js:312) at new i (mdb.min.js:312) at HTMLButtonElement. (mdb.min.js:312) at HTMLDocument.e (mdb.min.js:306)findOne @ mdb.min.js:306i @ mdb.min.js:312(anonymous) @ mdb.min.js:312i @ mdb.min.js:312(anonymous) @ mdb.min.js:312e @ mdb.min.js:306**Resources (screenshots, code snippets etc.)**![enter image description here][1]![enter image description here][2] [1]: https://usercontent.mdbootstrap.com/mdb-images/support/891756d2-1a86-4f5f-9227-08ed03095f83-error.jpg [2]: https://usercontent.mdbootstrap.com/mdb-images/support/592b2ffb-1212-4374-ab92-858658cd345c-ok.jpg
<button type="button" class="btn btn-outline-success ms-5"
data-mdb-ripple-color="success"
data-mdb-toggle="modal"
data-mdb-target="#modalEdit"
data-mdb-id="-1">
<i class="fa fa-plus"></i>
</button>
Javascript
` const modalEdit = document.getElementById('modalEdit');
modalEdit.addEventListener('show.mdb.modal', (event) => {
const button = event.relatedTarget;
modalEdit.querySelector('.modal-title').textContent = `Edit Setting`;
document.getElementById('set-Name').value = "Test";
document.getElementById('btnOk').textContent = "Update";
})`
Ben Dunn free answered 2 years ago
We are also still seeing this issue.
Dawid Wajszczuk staff commented 2 years ago
Hi. Can you provide a snippet with this issue https://mdbootstrap.com/snippets/? Which version of MDB do you use?
mgray priority answered 3 years ago
For people who arrived here like me, this issue has not been fixed in 3.1. That's why I think that this ticket should be reopened.
stern.peter.78 free answered 3 years ago
I've already found a workaround. Now I call a function which will start the Modal. Then it also works with icon.
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: Web
- Browser: Chrome
- OS: Win 10
- Provided sample code: No
- Provided link: Yes