Topic: Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
Expected behavior A button calls a modal; however, I'm getting a console error.
Actual behavior
I get this error in the console mdb.min.js:38436 Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
Resources (screenshots, code snippets etc.)
Button that calls the modal
<div
class="modal fade"
id="deleteRoleModal"
tabindex="-1"
aria-labelledby="deleteRoleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteRoleModalLabel">
Confirm Delete
</h5>
<button
type="button"
class="btn-close"
data-mdb-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
Are you sure you want to delete this role?
<div id="role-name-for-delete" class="text-warning"></div>
</div>
<div class="modal-footer">
<div class="col-auto" id="results-message-delete-role"></div>
<div class="col-auto">
<button
type="button"
class="btn btn-secondary"
data-mdb-dismiss="modal">
Cancel
</button>
<button type="button" id="confirmDelete" class="btn btn-danger">
YES, DELETE ROLE
</button>
</div>
</div>
</div>
</div>
</div>
After doing some testing by comparing another modal from a different page, I discovered that the issue was due to the icon element. I used ChatGPT-4 to find a further solution, and the following worked for me. Here is GPT's response.
I see. In that case, it's likely that the event listener is not properly attached to the icon element. Let's modify the event delegation for the delete button and add the pointer-events: none; CSS property to the icon. This will ensure that the click event is triggered on the delete button and not the icon itself.
Add the pointer-events: none; CSS property to the icon inside the delete button: html Copy code .delete-user-button i { pointer-events: none; } Update the event delegation for the delete button: javascript Copy code $(document).on("click", "#datatable-user-roles", function (event) { const target = event.target;
if ($(target).closest(".delete-user-button").length) { const btn = $(target).closest(".delete-user-button"); const ID = btn.attr("data-mdb-index"); deleteRole(ID); $("#role-name-for-delete").text(roles[ID].Role_Name); console.log("clicked delete role button"); }
// ... }); This should ensure that the click event is triggered properly on the delete button, and the role name should now appear in the modal as expected.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 6.2.0
- Device: PC
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: No