无法在 UpdateView 中关闭来自 SuccessMessageMixin 的消息
Can't dismiss message from SuccessMessageMixin in UpdateView
更新:问题范围更广,因为没有 JS 工作 - 请参阅下面我自己的回答。
我有一个 UpdateView,我在其中使用 SuccessMessageMixin 来显示 "updated" 消息。这工作正常,但我似乎无法忽略该消息 - 单击 '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">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
[...]
据我了解,close 方法在 bootstrap.js 中定义(仔细检查似乎证实了这一点 - 我发现了 close,data-dismiss 等)虽然我承认,我不是JS 专家(这是名单上的下一个......)
我的理解是这个用于显示和关闭消息的设置应该可以正常工作 "out of the box",所以我错过了什么?
我意识到这个问题比我想象的要大(而且更简单!),因为我的 JS 通常不起作用(当导航栏下拉菜单不起作用时意识到这一点)。
最后发现是加载的.js脚本顺序不对。重新排列后,顺序为:
- jquery-3.3.1.slim.min.js
- popper.min.js
- bootstrap.min.js
一切重新开始。以为我会添加这个答案以防万一有人遇到类似问题。
更新:问题范围更广,因为没有 JS 工作 - 请参阅下面我自己的回答。
我有一个 UpdateView,我在其中使用 SuccessMessageMixin 来显示 "updated" 消息。这工作正常,但我似乎无法忽略该消息 - 单击 '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">×</span>
</button>
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
[...]
据我了解,close 方法在 bootstrap.js 中定义(仔细检查似乎证实了这一点 - 我发现了 close,data-dismiss 等)虽然我承认,我不是JS 专家(这是名单上的下一个......)
我的理解是这个用于显示和关闭消息的设置应该可以正常工作 "out of the box",所以我错过了什么?
我意识到这个问题比我想象的要大(而且更简单!),因为我的 JS 通常不起作用(当导航栏下拉菜单不起作用时意识到这一点)。
最后发现是加载的.js脚本顺序不对。重新排列后,顺序为:
- jquery-3.3.1.slim.min.js
- popper.min.js
- bootstrap.min.js
一切重新开始。以为我会添加这个答案以防万一有人遇到类似问题。