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