PROBLEM
I was having issues when I opened a second, third, fourth, etc modal. Here’s what was happening:
I open different modals when the user clicks on different buttons. These modals produce a different form depending on what button the user clicked.
However, if the user clicks out of the modal, it would close. If they clicked into a second modal, none of the JQuery would work in the modal. The JQuery I had was a date popup and other functionality. I thought it might have been an issue with datepicker
JQuery initially but then I realized other JQuery in the modal wasn’t working either.
I finally realized that since I was appending a div onto the body, that div was never getting destroyed upon modal close. All that was left was to destroy the div when the modal closed.
Easy, right?
WRONG!
After googling such things like “remove modal that’s been appended to body jquery”, “destroy modal on close jquery”, “on modal hide jquery” “jquery not working on second modal”, etc. I couldn’t find a solution. Everything I tried from
.on("hidden.bs.modal"...)
stuff like that wouldn’t work.
SOLUTION
I finally thought outside the box!
Since all my HTML that I use to produce a modal had the same ID (hence the issue, duplicate IDs being added to the HTML), I would simply remove that upon another click. So in my JS when I’m clicking on a link to open a modal it’s:
$(".modal_ajax").click(function(event) { $("#ajax_wrapper").remove(); // remove any other modals event.preventDefault(); this.blur(); $.get(this.href, function(html) { $(html).appendTo("body").modal({ fadeDuration: 700, fadeDelay: 0.20 }); }); });
Adding the $("#ajax_wrapper").remove();
did the trick!