1<!-- A dynamic modal, with content loaded using AJAX. --> 2<div class="modal fade" id="wt-ajax-modal" tabindex="-1" role="dialog" aria-labelledBy="wt-ajax-modal-title" aria-hidden="true"> 3 <div class="modal-dialog modal-lg" role="document"> 4 <div class="modal-content"> 5 <div id="wt-ajax-modal-title"></div> 6 </div> 7 </div> 8</div> 9 10<script> 11 document.addEventListener("DOMContentLoaded", function () { 12 $("#wt-ajax-modal") 13 .on("show.bs.modal", function (event) { 14 let modal_content = this.querySelector(".modal-content"); 15 16 // If we need to paste the result into a select2 control 17 modal_content.dataset.selectId = event.relatedTarget.dataset.selectId; 18 19 // Clear existing content (to prevent FOUC) and load new content. 20 $(modal_content) 21 .empty() 22 .load(event.relatedTarget.dataset.href); 23 }) 24 .on("shown.bs.modal", function (event) { 25 // Activate autocomplete fields 26 $(".select2", $(this)).select2({ 27 dropdownParent: $(this), 28 escapeMarkup: function (x) { return x } 29 }); 30 }); 31 }); 32</script> 33