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 tom-select control 17 modal_content.dataset.wtSelectId = event.relatedTarget.dataset.wtSelectId; 18 19 // Clear existing content (to prevent FOUC) and load new content. 20 $(modal_content) 21 .empty() 22 .load(event.relatedTarget.dataset.wtHref, function () { 23 // Activate autocomplete fields 24 this.querySelectorAll('.tom-select').forEach(element => webtrees.initializeTomSelect(element)); 25 }); 26 }); 27 }); 28</script> 29