Dagango 응용 프로그램에서 Material Bootstrap Alert을 사용하려고합니다. 페이지에 로그인하는 동안 사용자가 잘못된 암호 또는 사용자 이름을 입력하면 오른쪽 상단에 오류 토스트 메시지가 나타납니다. JS 경고와 함께 완벽하게 잘 작동하지만 toastr.error('Wrong login credentials. Please, try again...');
를 호출려고 할 때 나는이 erorrs를 얻을 :ReferenceError : 재료 부트 스트랩 경고를 사용할 때 toastr가 정의되지 않았습니다.
jQuery.Deferred exception: toastr is not defined @http://127.0.0.1:8000/login/:63:9 [email protected]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
내 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에 익숙하지 않습니다. 모든 자바 스크립트 파일은 official MDB website입니다.