Question

更新：问题范围更广，因为没有JS在起作用-请在下面查看我自己的答案。

我有一个UpdateView，我正在其中使用SuccessMessageMixin显示“已更新”消息。效果很好，但是我似乎无法消除该信息-单击“ x”没有任何作用。

views.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，数据关闭等），尽管我承认，我不是JS专家（那是清单上的下一个...）

我的理解是，这种用于显示和消除消息的设置应该可以“开箱即用”地工作，所以我缺少什么呢？

Answer 1

我意识到这个问题比我想象的要大（并且更简单！），因为我的JS总体上不起作用（当导航栏下拉菜单不起作用时意识到了这一点）。

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

jquery-3.3.1.slim.min.js
popper.min.js
bootstrap.min.js

一切都重新开始了。以为我会添加此答案，以防有人偶然发现类似问题。

无法在UpdateView中关闭来自SuccessMessageMixin的消息

1 个答案: