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