Bootstrap 4'modal.modal 不是函数'

Question

{% 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">&times;</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>

For some reason it can't detect modal as a function.由于某种原因，它无法将模态检测为 function。 I've looked at all the other posts regarding this and nothing seems to be fixing it.我已经查看了有关此问题的所有其他帖子，但似乎没有任何问题可以解决。 Really not sure what's going wrong here.真的不确定这里出了什么问题。

The goal is to have a modal come up when a file upload is done either successfully or with an error.目标是在文件上传成功或出错时出现模式。

I'm using Django with Bootstrap 4, Jquery, Ajax.我正在使用 Django 和 Bootstrap 4、Jquery、Ajax。

Answer 1

I ended up having to change my CDNs我最终不得不更改我的 CDN

<header>
  <script
    src="http://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"
  ></script>
  <link
    crossorigin="anonymous"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    rel="stylesheet"
  />
  <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"
  ></script>
</header>

Bootstrap 4'modal.modal 不是函数'

问题描述

1 个解决方案

解决方案1
0 2020-04-15 07:35:17

Bootstrap 4'modal.modal 不是函数'

问题描述

1 个解决方案

解决方案1 0 2020-04-15 07:35:17

解决方案1
0 2020-04-15 07:35:17