I have a custom popup that shows upon form submission to let the user know it was successful. Currently it displays when it's supposed to (although I can't get it to display in the middle right on top, but that's a minor issue) like shown below:
But the little X button does not actually close the message. You can click it but it does nothing, and if you reload the page then it's gone until you submit again.
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>
I think the problem could be related to the warning I get that says Unresolved function or method toast() on $('.toast').toast('show'); but I'm not sure how to resolve this issue (I got this from https://www.w3schools.com/bootstrap4/bootstrap_toast.asp but I don't know if I just didn't add something important to make this work)
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">×</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)
The close button is missing the attribute data-dismiss="toast"
You'd need to add the toast class to the containing div though as well
https://www.w3schools.com/bootstrap4/bootstrap_toast.asp
Related
I'm trying to use Django template language to manipulate JS scripts, but when I try appears the following error
I checked the error in case there is a miss typed code, but I couldn't detect it.
How is the best way to handle multiple JS script with multiple HTML files in Django template language?
Infraestructura.html
{% extends "Portafolio/layout.html" %}
{% block scripts %}
<script src = "{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script>
{% endblock %}
{% block content %}
<form class="form mt-5" id="infra">
<h1>Factibilidad Técnica y Operativa</h1>
<h2>Análisis de Infraestructura</h2>
<main class="container">
<section class="row">
<div class="col-lg-4 mb-2">
<input name='infs' class="form-control" type="text" placeholder="Infraestructura">
</div>
<div class="col-lg-4 mb-2">
<input name='time' class="form-control" type="text" placeholder="Tiempo">
</div>
<div class="col-lg-4 mb-2">
<input name='cost' class="form-control" type="text" placeholder="Costo Mensual">
</div>
</section>
</main>
<nav class="btn-group">
<button id='add' class='btn btn-success' type='button'>
<i class="fa fa-plus-square"></i> Añadir
</button>
<button id='rem' class='btn btn-danger' type='button'>
<i class="fa fa-minus-square"></i> Eliminar
</button>
</nav>
</form>
<form class="form mt-3">
<div class="d-grid gap-2 mt-3">
<a class="btn btn-lg btn-primary" href="tecnicoequipo.html">Siguiente</a>
</div>
<div class="d-grid gap-2 mt-3">
<a class="btn btn-lg btn-primary" href="financierobeneficio.html">Atrás</a>
</div>
</form>
{% endblock %}
layout.html
{% load static %}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href= "{% static 'Portafolio/style.css' %}">
{% block scripts %} <script src="{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script> {% endblock}
<title>{% block title %} {% endblock %}</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
You have to load static at the top of your HTML document in your Infraestructura.html
like this
{% extends "Portafolio/layout.html" %}
{% load static %}
I want to make an infinite scroll but it's not working and throws errors in the console:
Here is my HTML:
{% extends 'base.html' %}
{% load static %}
{% block imports %}
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock imports %}
{% block main %}
<h1 class="title">Was soll es denn heute geben?</h1>
<div class="all-recipes infinite-container" id="all-recipes">
{% for recipe in queryset_recipes %}
<div class="recipe-box infinite-item">
<a href="{{recipe.get_absolute_url}}" class="recipe-link">
<img src="{{recipe.images}}" alt="Rezept Bild" class="image" />
<h3 class="recipe-title">{{recipe.title}}</h3>
</a>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}
<div class="d-flex justify-content-center" style="display:none;">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
{% endblock main %}
{% block scripts %}
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
}
});
</script>
{% endblock scripts %}
And here are the Errors:
1.
infinite.min.js:57 Uncaught TypeError: Cannot set property 'Infinite' of undefined
at infinite.min.js:57
at infinite.min.js:58
(index):329 Uncaught ReferenceError: Waypoint is not defined
at (index):329
I really hope that somebody could help me solving those errors because I have no idea why this is happening. Thank You!
You should have instead of
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
Next ordering:
<script src="/static/js/jquery-2.2.4.min.js"></script>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
Pay attention to jquery.waypoints.min.js
I'm trying to use the django-boostrap4 in my project, so I did the following:
My home_base.html
{% load static %}
{% load bootstrap4 %}
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
<head>
{% block head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% bootstrap_css %}
<title>Avaliei - Inteligência Imobiliária</title>
{% endblock %}
</head>
<body>
{% block body %}
Body Content
{% endblock %}
{% bootstrap_jquery %}
{% bootstrap_javascript %}
</body>
</html>
My index.html:
{% extends "home_base.html" %}
{% load static %}
{% block body %}
<div class="body_wrapper">
<div id="preloader">
<div id="ctn-preloader" class="ctn-preloader">
<div class="animation-preloader">
<div class="spinner"></div>
<div class="txt-loading">
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="V" class="letters-loading">
V
</span>
<span data-text-preloader="A" class="letters-loading">
A
</span>
<span data-text-preloader="L" class="letters-loading">
L
</span>
<span data-text-preloader="I" class="letters-loading">
I
</span>
<span data-text-preloader="E" class="letters-loading">
E
</span>
<span data-text-preloader="I" class="letters-loading">
I
</span>
</div>
<p class="text-center">Carregando</p>
</div>
<div class="loader">
<div class="row">
<div class="col-3 loader-section section-left"><div class="bg"></div></div>
<div class="col-3 loader-section section-left"><div class="bg"></div></div>
<div class="col-3 loader-section section-right"><div class="bg"></div></div>
<div class="col-3 loader-section section-right"><div class="bg"></div></div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
My settings.py:
INSTALLED_APPS = [
...,
'bootstrap4', # Django Bootstrap 4
...
]
But when I runserver, my page is blank with no style at all, either animation from preloader. Despite that, when add a component like a button 'btn-danger', it works fine! At least it's showing the right style.
Am I missing some basic setting for this to work properly? I've tried add the CDN links directly in the index.html, but the behavior is the same.
I had the same problem and it was very frustrating, and even more so when I learned how simple it was! If you check the documentation for the library you will see what you need to do.
Add:
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
Into your heading or body for before any other script/links that may use or extend the bootstrap definitions.
Documentation: https://django-bootstrap4.readthedocs.io/en/latest/quickstart.html
I hope that works for you.
I created a nav.html template,css.html template and js.html template. then i used the include template tag to render them in my base.html template.
(nav.html)
{% load staticfiles %}
<div class="container-fluid">
<nav class="navbar navbar-dark bg-primary py-1">
<a class="navbar-brand mb-0 h1" href="#">
<img src="{% static 'profiles/logo.png' %}" width="30" height="30" class='d-inline-block align-top' alt=""/>Hot-Minet Services Ltd
</a>
</nav>
</div>
(css.html)
link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
(js.html)
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
(base.html)
{% load staticfiles %}
<!Doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% include "snippets/css.html" %}
<title>{% block title %}My amazing site{% endblock %}</title>
</head>
<body>
{% include "snippets/nav.html" %}
<br>
{% block form %}
<div class="container">
<div class="row justify-content-md-center">
<div class="col-sm-6">
<form action="" method="POST">{% csrf_token %}
{{ form.as_p }}
<button type="button" class="btn btn-primary btn-lg">Save</button>
</form>
</div>
</div>
</div>
{% endblock %}
{% include "snippets/js.html" %}
</body>
</html>
(home.html)
{% extends "base.html" %}
{% block form %}
<div class="container">
<div class="row justify-content-md-center">
<div class="form-group col-sm-4">
<form action="/update/slug/" method="GET">
<input class="pt-3 form-control" type="text" name="" value="" placeholder="Type client name here"/>
<br>
<input class="btn btn-primary pt-2 mb-5" type="submit" value="Update"/>
</form>
</div>
</div>
</div>
{% endblock %}
(settings.py)
STATIC_URL = '/static/'
if DEBUG:
MEDIA_URL = '/media/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static' 'static-alone')
MEDIA_ROOT = os.path.join(BASE_DIR, 'static' 'media')
STATICFILES_DIR = [
os.path.join(BASE_DIR, "static" 'profiles'),
]
(urls.py)
from django.conf.urls import url, include
from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from profiles.views import(
home,
SendMail,
Add,
resultsPageView,
profileUpdate,
)
urlpatterns = [
#
# Examples:
# url(r'^$', 'myproject.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
url(r'^admin/',admin.site.urls),
url(r'^home/',home),
url(r'^SendMail/', SendMail.as_view(), name='SendMail'),
url(r'^Add/', Add.as_view(), name='Add'),
url(r'^results/', resultsPageView.as_view(), name='results'),
url(r'^update/(?P<slug>[\w-]+)/$', profileUpdate.as_view(), name='update'),
]
if settings.DEBUG:
urlpatterns +=static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
everything is working fine but the logo in the navbar does not display can someone identify what am doing wrong here Thanks.
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.
Found the reason of error. I've been using version of framework which don't have toast messages