Topic: Modal hide() broken (... and maybe dispose())?
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;
}
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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