{% load static %}
<!DOCTYPE html>
<header>
<link
crossorigin="anonymous"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
rel="stylesheet"
/>
<script
crossorigin="anonymous"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
></script>
<script
crossorigin="anonymous"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
></script>
</header>
<div
class="modal fade"
id="my_modal"
tabindex="-1"
role="dialog"
data-target="#my_modal"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div id="modal_body" class="modal-body">
...
</div>
</div>
</div>
</div>
<link href="{% static 'upload_data.css'%}" rel="stylesheet" type="text/css" />
<script>
var file_selected = false;
var upload_button = $("#upload_button");
var submit_label = $("#submit_label");
var loading_div = $("#loading_div");
var file_input = $("#file_input");
var data_upload = $("#data_upload");
var progress_bar = $("#progress_bar");
var spinner = $("#spinner");
var modal = $("#my_modal");
var modal_body = $("#modal_body");
$(document).ready(function () {
data_upload.submit(function (event) {
disable_upload();
spinner.css("visibility", "visible");
var fd = new FormData(event.currentTarget);
fd.append("file", file_input[0].files[0]);
$.ajax({
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener(
"progress",
function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
var percentString = (percentComplete * 100).toString();
progress_bar.width(percentString + "%");
}
},
false
);
return xhr;
},
url: window.location.href,
type: "POST",
data: fd,
dataType: "json",
processData: false,
contentType: false,
success: function (response) {
enable_upload();
spinner.css("visibility", "hidden");
show_modal("Go to");
},
error: function (response) {
enable_upload();
spinner.css("visibility", "hidden");
show_modal(response.msg);
},
});
});
});
function show_modal(msg) {
modal.modal("show");
modal_body.html(msg);
}
</script>
По какой-то причине он не может определить модальную функцию. Я просмотрел все остальные посты, касающиеся этого, и, похоже, ничего не исправляет. На самом деле не уверен, что здесь происходит не так.
Цель состоит в том, чтобы модал появлялся, когда загрузка файла выполнена успешно или с ошибкой.
Я использую Django с Bootstrap 4, Jquery Ajax.