ReferenceError：使用Material Bootstrap警报时未定义toastr

Question

I'm trying to use Material Bootstrap Alert in my Django app. 我正在尝试在Django应用中使用Material Bootstrap Alert 。 If user inputs wrong password or username while trying to login to the page, the error toast message should appear in the upper right corner. 如果用户在尝试登录页面时输入错误的密码或用户名，则错误提示消息应显示在右上角。 With js alert it works perfectly fine but when I'm trying to invoke toastr.error('Wrong login credentials. Please, try again...'); 使用js alert可以正常工作，但是当我尝试调用toastr.error('Wrong login credentials. Please, try again...'); I get these erorrs: 我得到这些错误：

jQuery.Deferred exception: toastr is not defined @ http://127.0.0.1:8000/login/:63:9 j@ http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:29997 g/http://127.0.0.1:8000/static/js/jquery-3.2.1.min.js:2:30313 undefined jQuery.Deferred例外：未定义烤面包机@ http://127.0.0.1:8000/login/:63:9 j @ http://127.0.0.1:8000/static/js/jquery-3.2.1.min。 js：2：29997 g / http：//127.0.0.1：8000 / static / js / jquery-3.2.1.min.js：2：30313未定义

ReferenceError: toastr is not defined ReferenceError：未定义烤面包机

Here is my login.html page: 这是我的login.html页面：

{% extends 'utas/template.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{% block title %}Login{% endblock %}</title>
</head>

<body>
  {% block pagecontent %}

  <div class="container">
    <!-- Begin Form login -->
    <form method="post" class="mt-5" style="width: 24rem; margin: 0 auto;">
        {% csrf_token %}
        <p class="h5 text-center mb-4">Sign in</p>

        <div class="md-form">
            <i class="fa prefix material-icons grey-text">account_circle</i>
            <input type="text" id="defaultForm-user" class="form-control" name="username"
            required
            oninvalid="this.setCustomValidity('Username is required!')"
            oninput="setCustomValidity('')">
            <label for="defaultForm-user">Your username</label>
        </div>

        <div class="md-form">
            <i class="fa prefix material-icons grey-text">lock</i>
            <input type="password" id="defaultForm-pass" class="form-control" name="password"
            required
            oninvalid="this.setCustomValidity('Password is required!')"
            oninput="setCustomValidity('')">
            <label for="defaultForm-pass">Your password</label>
        </div>

        <div class="text-center">
            <button type="submit" class="btn btn-default">Login</button>
        </div>
      </form>
    <!-- End Form login -->

  </div>
  {% endblock %}
  {% block script %}
  {% if form.errors %}
  <script type='text/javascript'>
    $(document).ready(function()
    {
        toastr.error('Wrong login credentials. Please, try again...');
    });
  </script>
  {%endif%}
  {% endblock %}
</body>
</html>

And here is my template.html with required scripts: 这是我的template.html和必需的脚本：

{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>UTAS - {% block title %}{% endblock %} </title>
    <!-- Material Icons -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" rel="stylesheet">
    <!-- Custom styles -->
    <link href="{% static 'css/style.css'%}" rel="stylesheet">
  </head>
  <body>
    {% block pagecontent %}

    {% endblock %}
  </body>
  <script src="{% static 'js/jquery-3.2.1.min.js'%}"></script>
  <script src="{% static 'js/popper.min.js'%}"></script>
  <script src="{% static 'js/bootstrap.min.js'%}"></script>
  <script src="{% static 'js/mdb.min.js'%}"></script>
  {% block script %}

  {% endblock %}
</html>

I'm not very experienced with JS or jQuery. 我对JS或jQuery不太了解。 All javascript files are from official MDB website . 所有JavaScript文件均来自MDB官方网站。

Answer 1

Found the reason of error. 发现错误原因。 I've been using version of framework which don't have toast messages 我一直在使用没有烤面包消息的框架版本

ReferenceError：使用Material Bootstrap警报时未定义toastr

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-09 20:15:35

ReferenceError：使用Material Bootstrap警报时未定义toastr

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-09 20:15:35

解决方案1
0 已采纳 2017-11-09 20:15:35