Search code examples
javascriptjquerydjangobootstrap-material-design

ReferenceError: toastr is not defined when using Material Bootstrap alert

I'm trying to use Material Bootstrap Alert in my Django app. 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...'); 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

ReferenceError: toastr is not defined

Here is my login.html page:

{% 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:

{% 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. All javascript files are from official MDB website.

Solution

  • Found the reason of error. I've been using version of framework which don't have toast messages