自定义弹出消息呈现但按钮不起作用？答案

【问题标题】：Custom popup message rendering but button not working?自定义弹出消息呈现但按钮不起作用？
【发布时间】：2019-11-14 20:44:02
【问题描述】：

我有一个自定义弹出窗口，它会在表单提交时显示，让用户知道它已成功。目前它在它应该显示的时候显示（虽然我不能让它显示在顶部的中间，但这是一个小问题），如下所示：

但小 X 按钮实际上并没有关闭消息。你可以点击它，但它什么也不做，如果你重新加载页面，它就会消失，直到你再次提交。

base.html

{% load static purchasing_tags humanize %}
{% include 'operations/message.html' %}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="{% static 'images/favicon.ico' %}" type="image/x-icon" rel="shortcut icon"/>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="{% static "css/plugins/bootstrap.min.css" %}" rel="stylesheet">
    <link href="{% static "css/apps.css" %}" rel="stylesheet">

    <script src="{% static "js/plugins/jquery.js" %}"></script>
    <script src="{% static "js/plugins/bootstrap.min.js" %}"></script>

    <!--[if lt IE 9]>
    <script src="{% static 'js/plugins/respond.js' %}"></script>
    <![endif]-->
</head>
<body>
    <div id="login" class="panel panel-default">
        <div class="panel-body">
            {% block main %}
            {% endblock main %}
        </div>
        <div class="panel-footer">
            {% block panel_footer %}
            {% endblock %}
        </div>
    </div>

    {% if messages %}
    <script>
      {% for message in messages %}
          $(document).ready(function () {
              $('.toast').toast('show');
          });
      {% endfor %}
    </script>
    {% endif %}
</body>

我认为问题可能与我在$('.toast').toast('show'); 上收到Unresolved function or method toast() 的警告有关，但我不确定如何解决此问题（我从https://www.w3schools.com/bootstrap4/bootstrap_toast.asp 得到这个问题，但我不知道是否我只是没有添加重要的东西来完成这项工作）

enter_exit_area.html

{% extends "base.html" %}
{% load core_tags %}

{% block main %}
    <form id="warehouseForm" action="" method="POST" class="form-horizontal" novalidate >
        {% csrf_token %}

        <div>
            <div>
                <label>Employee</label>
                {{ form.employee_number }}
            </div>
            <div>
                <label>Work Area</label>
                {{ form.work_area }}
            </div>
            <div>
                <label>Station</label>
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter" >Enter Area</button>
            </div>
        </div>
    </form>
{% endblock main %}

message.html

{% for message in messages %}
  <div style="position: absolute" class="bg-{% if message.tags == 'error' %}danger{% else %}{{message.tags}}{% endif %}" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
    <div>
      <strong class="mr-auto">
        {{message.tags|capfirst}}
      </strong>
      <button type="button" class="ml-2 mb-1 close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div>
      {{message|safe}}
    </div>
  </div>
{% endfor %}

views.py

class EnterExitArea(CreateView):
    model = EmployeeWorkAreaLog
    template_name = "operations/enter_exit_area.html"
    form_class = WarehouseForm

    def form_valid(self, form):
        emp_num = form.cleaned_data['employee_number']
        area = form.cleaned_data['work_area']
        station = form.cleaned_data['station_number']

        if 'enter_area' in self.request.POST:
            form.save()
            EmployeeWorkAreaLog.objects.filter(Q(employee_number=emp_num) & Q(work_area=area) & Q(time_out__isnull=True)).update(time_in=datetime.now())

            messages.success(self.request, "You have entered")
            return HttpResponseRedirect(self.request.path_info)

【问题讨论】：

标签： javascript python jquery html css

【解决方案1】：

关闭按钮缺少data-dismiss="toast"属性

您还需要将 toast 类添加到包含 div 的类中

https://www.w3schools.com/bootstrap4/bootstrap_toast.asp

【讨论】：