Modal hide() broken (... and maybe dispose())?


Topic: Modal hide() broken (... and maybe dispose())?

Andrew Ford pro premium priority asked 4 years ago

Expected behavior

The modal hides

Actual behavior

The modal doesn't hide

Resources (screenshots, code snippets etc.)

The base of my code comes from your "MDB4 Contact Form" tutorial, where you have if(data.code).

When a user presses a button / clicks a link, the modal shows. In the modal contains a <textarea></textarea> and a save button.

I fill it out (or modify the contents), and presses the save button. In the Network tab on the file being called via Ajax I see the response {"output":"some example text","code":1}. I see "some example text" get put on my page behind the modal's backdrop, but the modal remains.

if (data.code) {
  var bioMdl = document.getElementById('editBioModal');
  var modal = new mdb.Modal(bioMdl);
  console.log(bioMdl, modal); // < made sure the modal does it exist, and it does
  modal.hide();
  document.getElementById('mybio').innerHTML = data.output;
}

Krzysztof Wilk staff answered 4 years ago

Hi!

var modal = new mdb.Modal(bioMdl); -> this line creates a new instance of a modal on an instance that already exists (our modals have an auto init). Try this:

if (data.code) {
  const bioMdl = document.getElementById('editBioModal');
  const instance = mdb.Modal.getInstance(bioMdl);
  console.log(bioMdl, modal); // < make sure the modal exists
  instance.hide();
  document.getElementById('mybio').innerHTML = data.output;
}

If code above doesn't work - could you paste below errors from your console, if some occurs? It'll be very helpful :)

Best regards


Andrew Ford pro premium priority commented 4 years ago

Thank you that worked.


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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 2.0.0
  • Device: N/A
  • Browser: N/A
  • OS: N/A
  • Provided sample code: No
  • Provided link: Yes