ReferenceError: toastr не определяется при использовании оповещения о загрузке материала

Я пытаюсь использовать Material Bootstrap Alert в своем приложении Django. Если пользователь вводит неправильный пароль или имя пользователя при попытке входа на страницу, в правом верхнем углу должно появиться сообщение об ошибке. С js alert работает отлично, но когда я пытаюсь вызвать toastr.error('Wrong login credentials. Please, try again...'); Я получаю эти ошибки:

Исключение jQuery.Deferred: toastr не определен @ 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 г /http://127.0.0.1:8000/ статический /js/jquery-3.2.1.min.js:2:30313 не определено

ReferenceError: toastr не определен

Вот моя страница 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>

А вот мой 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>

Я не очень опытен с JS или JQuery. Все файлы JavaScript с официального сайта MDB.

Источник

1 ответ

Решение

Нашел причину ошибки. Я использую версию фреймворка, который не имеет тост сообщений

Источник
Другие вопросы по тегам