xref: /webtrees/resources/views/modals/ajax.phtml (revision bd29d468ac3a5ed7a23d7dd8f300504dda83fc72)
1dd6b2bfcSGreg Roach<!-- A dynamic modal, with content loaded using AJAX. -->
2dd6b2bfcSGreg Roach<div class="modal fade" id="wt-ajax-modal" tabindex="-1" role="dialog" aria-labelledBy="wt-ajax-modal-title" aria-hidden="true">
3dd6b2bfcSGreg Roach    <div class="modal-dialog modal-lg" role="document">
40af9236aSGreg Roach        <div class="modal-content">
50af9236aSGreg Roach            <div id="wt-ajax-modal-title"></div>
60af9236aSGreg Roach        </div>
7dd6b2bfcSGreg Roach    </div>
8dd6b2bfcSGreg Roach</div>
9dd6b2bfcSGreg Roach
10dd6b2bfcSGreg Roach<script>
11*c8d78f19SGreg Roach  document.addEventListener('DOMContentLoaded', function () {
12*c8d78f19SGreg Roach    $('#wt-ajax-modal')
13*c8d78f19SGreg Roach      .on('show.bs.modal', function (event) {
14*c8d78f19SGreg Roach        let modal_content = this.querySelector('.modal-content');
15dd6b2bfcSGreg Roach
16*c8d78f19SGreg Roach        // If we need to paste the result into a tom-select control
17d4786c66SGreg Roach        modal_content.dataset.wtSelectId = event.relatedTarget.dataset.wtSelectId;
18dd6b2bfcSGreg Roach
19dd6b2bfcSGreg Roach        // Clear existing content (to prevent FOUC) and load new content.
20dd6b2bfcSGreg Roach        $(modal_content)
21dd6b2bfcSGreg Roach          .empty()
22d4786c66SGreg Roach          .load(event.relatedTarget.dataset.wtHref, function () {
23dd6b2bfcSGreg Roach            // Activate autocomplete fields
24*c8d78f19SGreg Roach            this.querySelectorAll('.tom-select').forEach(element => webtrees.initializeTomSelect(element));
25dd6b2bfcSGreg Roach          });
26dd6b2bfcSGreg Roach      });
27dd6b2bfcSGreg Roach  });
28dd6b2bfcSGreg Roach</script>
29