Topic: MDB5 Modal not working with Fontawesome Icon

stern.peter.78 free asked 1 year 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 7 months ago


We are also still seeing this issue.


Dawid Wajszczuk staff commented 7 months ago

Hi. Can you provide a snippet with this issue https://mdbootstrap.com/snippets/? Which version of MDB do you use?


mgray priority answered 1 year 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 1 year ago


I've already found a workaround. Now I call a function which will start the Modal. Then it also works with icon.



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: Web
  • Browser: Chrome
  • OS: Win 10
  • Provided sample code: No
  • Provided link: Yes