0

更新：问题范围更广，因为没有 JS 工作 - 请参阅下面我自己的答案。

我有一个 UpdateView，我在其中使用 SuccessMessageMixin 显示“更新”消息。这很好用，但我似乎无法忽略该消息 - 单击“x”没有任何作用。

视图.py

class LocationChangeView(LoginRequiredMixin, SuccessMessageMixin, UpdateView):
    model = Location
    template_name = "adventures/location.html"
    form_class = LocationChangeForm
    success_message = _("Location successfully updated")

从模板

[...]
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <!-- Awesome fonts -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
        integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

[...]

<div class="container-fluid">
    {% if messages %}
    {% for message in messages %}
    <!-- <div class="alert {{ message.tags }} alert-dismissable" role="alert"> -->
    <div class="alert alert-info alert-dismissable" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times</span>
        </button>
        {{ message }}
    </div>
    {% endfor %}
    {% endif %}
</div>

[...]

据我了解，close 方法是在 bootstrap.js 中定义的（仔细检查似乎可以验证这一点 - 我发现了 close、data-dismiss 等）虽然我承认，我不是 JS 专家（这是下一个在名单上...）

我的理解是，这种用于显示和关闭消息的设置应该几乎可以“开箱即用”，所以我错过了什么？

4

1 回答 1

0

我意识到这个问题比我想象的要大（而且更简单！），因为我的 JS 通常不工作（当导航栏下拉菜单不工作时意识到这一点）。

最后，事实证明正在加载的 .js 脚本的顺序错误。一旦这些被重新排列，以便顺序是：

  1. jquery-3.3.1.slim.min.js
  2. popper.min.js
  3. bootstrap.min.js

一切又开始工作了。以为我会添加这个答案，以防有人偶然发现类似问题。

于 2019-08-14T07:42:50.063 回答