Uncaught TypeError: Cannot read properties of undefined (rea

Topic: Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')

JTH priority asked 1 year ago

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>

Add comment

JTH priority answered 1 year ago

4 0 Best answer

<p>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.</p>

<pre class="prettyprint"><code>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.
</code></pre>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
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

JTH

8Support score
6Questions 1Answers 0Snippets