xref: /webtrees/resources/views/modals/create-location.phtml (revision d4786c66945cca20d5ce34ac3cf08cf5a5110ae2)
1<?php
2
3use Fisharebest\Webtrees\Http\RequestHandlers\CreateLocationAction;
4use Fisharebest\Webtrees\I18N;
5use Fisharebest\Webtrees\Tree;
6
7/**
8 * @var Tree $tree
9 */
10
11?>
12
13<form method="post" action="<?= e(route(CreateLocationAction::class, ['tree' => $tree->name()])) ?>" id="wt-modal-form">
14    <?= csrf_field() ?>
15
16    <?= view('modals/header', ['title' => I18N::translate('Create a location')]) ?>
17
18    <div class="modal-body">
19        <?= view('modals/location-fields') ?>
20    </div>
21
22    <?= view('modals/footer-save-cancel') ?>
23</form>
24
25<script>
26    // Submit the modal form using AJAX
27    document.getElementById("wt-modal-form").addEventListener("submit", function (event) {
28        event.preventDefault();
29        let form          = event.target;
30        let modal_content = document.querySelector("#wt-ajax-modal .modal-content");
31        let select        = document.getElementById(modal_content.dataset.wtSelectId);
32
33        $.ajax({
34            url:         form.action,
35            type:        form.method,
36            data:        new FormData(form),
37            async:       false,
38            cache:       false,
39            contentType: false,
40            processData: false,
41            success:     function (data) {
42                if (select) {
43                    // If this modal was activated by the "new" button in a select2
44                    // edit control, then insert the result and select it.
45                    let option       = new Option(data.text, data.id, true, true);
46                    option.innerHTML = option.innerText;
47
48                    $(select)
49                        .select2({ escapeMarkup: (x) => x })
50                        .empty()
51                        .append(option)
52                        .trigger("change");
53
54                    $("#wt-ajax-modal").modal("hide");
55                } else {
56                    modal_content.innerHTML = data.html;
57                }
58            },
59            failure:     function (data) {
60                modal_content.innerHTML = data.html;
61            },
62        });
63    });
64</script>
65