Toast classList error


Topic: Toast classList error

AlessioB asked 3 years ago

Expected behavior

    let stackCount = 0;

function showToast(title, text) {
  stackCount++;

  const toast = document.createElement('div');
  toast.innerHTML = `
  <div class="toast-header">
    <strong class="me-auto">${stackCount}</strong>
    <small>11 mins ago</small>
    <button
      type="button"
      class="btn-close"
      data-mdb-dismiss="toast"
      aria-label="Close"
    ></button>
  </div>
  <div class="toast-body text-start">
    Stacking element
  </div>
  `;

  toast.classList.add('toast', 'fade');

  document.getElementById('stacking-container').appendChild(toast);
  /*this is line 102*/
  const toastInstance = new mdb.Toast(toast, {
    stacking: true,
    hidden: true,
    width: '450px',
    position: 'top-right',
    container: '#stacking-container',
    autohide: true,
    delay: 5000,
  });

  toastInstance.show();
});

Each call to the showToast function produces a new toast

Actual behavior

I get the following error

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at Object.addClass (manipulator.js:98)
at r.value (toast.js:194)
at r.value (toast.js:125)
at new r (toast.js:54)
at showToast (agfisnam:102)
at HTMLDocument.<anonymous> (agfisnam:69)
at e (jquery-3.6.0.min.js:2)
at t (jquery-3.6.0.min.js:2)

Line 103 correspond to

const toastInstance = new mdb.Toast ...

Resources (screenshots, code snippets etc.)


Michał Duszak staff answered 3 years ago

Have you created an element with the id of stacking-container? Because it works fine in the snippets https://mdbootstrap.com/snippets/standard/m-duszak/3354666#html-tab-view


AlessioB answered 3 years ago

More details

Cannot read properties of undefined (reading 'classList') TypeError: Cannot read properties of undefined (reading 'classList')
at Object.addClass (http://localhost/agfisnam/js/mdb.min.js:310:57861)
at r.value (http://localhost/agfisnam/js/mdb.min.js:316:71713)
at r.value (http://localhost/agfisnam/js/mdb.min.js:316:70554)
at new r (http://localhost/agfisnam/js/mdb.min.js:316:69333)
at showToast (http://localhost/agfisnam:98:35)
at HTMLDocument.<anonymous> (http://localhost/agfisnam:113:13)
at e (http://localhost/agfisnam/Scripts/jquery-3.6.0.min.js:2:30038)
at t (http://localhost/agfisnam/Scripts/jquery-3.6.0.min.js:2:30340) undefined

AlessioB answered 3 years ago

I forgot to update the reference to the container.

Thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: PC
  • Browser: Edge
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags