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"></div> 5 </div> 6</div> 7 8<script> 9 document.addEventListener("DOMContentLoaded", function () { 10 $("#wt-ajax-modal") 11 .on("show.bs.modal", function (event) { 12 let modal_content = this.querySelector(".modal-content"); 13 14 // If we need to paste the result into a select2 control 15 modal_content.dataset.selectId = event.relatedTarget.dataset.selectId; 16 17 // Clear existing content (to prevent FOUC) and load new content. 18 $(modal_content) 19 .empty() 20 .load(event.relatedTarget.dataset.href); 21 }) 22 .on("shown.bs.modal", function (event) { 23 // Activate autocomplete fields 24 $(".select2", $(this)).select2({ 25 dropdownParent: $(this), 26 escapeMarkup: function (x) { return x } 27 }); 28 }); 29 }); 30</script> 31