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 %}
Related
I am making a ecommerce website with Django framework.
I cannot make my bootstrap carousel work. Clicking on indicators and controls has no effect.
I have pulled in Bootstrap source files with NPM.
main.html
<!DOCTYPE html>
{% load static %}
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>
{% block title %}
{% endblock title %}
</title>
</head>
<body class="mt-sm-5 mt-md-5 mt-lg-5 mt-xl-5">
<header>
<div class="container border-bottom border-primary border-1">
</div>
</header>
<section class="page-content" id="page-content">
{% block content %}
{% endblock content %}
</section>
<script src="{% static 'js/bootstrap.js' %}"></script>
</body>
</html>
product_details.html
{% extends 'main.html' %}
{% load static %}
{% block title %}
Boutique - {{ product.title }}
{% endblock title %}
{% block content %}
<div class="container">
<div class="row" >
<div id="product-carousel" class="col-sm-12 col-md-6 border border-danger carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
{% if product.image2 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
{% endif %}
{% if product.image3 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
{% endif %}
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ product.image.url }}" class="img-fluid" alt="...">
</div>
{% if product.image2 %}
<div class="carousel-item">
<img src="{{ product.image2.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
{% if product.image3 %}
<div class="carousel-item">
<img src="{{ product.image3.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#product-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#product-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-sm-12 col-md-6 border border-warning">
<h3> {{ product.title }} </h3>
<h4> {{ product.price }} € </h4>
<h5> {{ product.description }} </h5>
<h6> {{ product.category }} </h6>
{% if product.stock > 0 %}
<div class="container border border-success">
<div class="row" >
<div class="col">
<label for="select-qty">Quantity</label>
</div>
<div class="col">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="select-qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
<button id="add-to-cart-button" value="{{ product.id }}" type = "button" class="btn btn-success">Ajouter au panier</button>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row" >
<div class="col-sm-12 col-md-6">
<a class="btn btn-dark" href="{% url 'basket:basket_summary' %}">Panier</a>
</div>
<div class="col-sm-12 col-md-6">
<a class="btn btn-light" href="{% url 'store:all_products' %}">Voir les produits</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Add to cart
$(document).on('click', '#add-to-cart-button', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url "basket:basket_add" %}',
data: {
productid: $('#add-to-cart-button').val(),
productqty: $('#select-qty option:selected').val(),
csrfmiddlewaretoken: "{{csrf_token}}",
action: 'post',
},
success: function (json) {
document.getElementById("cart-count").innerHTML = json.qty;
},
error: function (xhr, errmsg, err) {
},
});
})
</script>
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>
{% endblock content %}
The products have at least to images (image and image 2) and the controls and indicators show. But nothing happens when clicking on them.
EDIT
In the browser console, I have two errors.
Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: $(...).carousel is not a function
You are getting an Uncaught TypeError: $(...).carousel is not a function because you called that function before you loading the boostrap.js.
Give this a try, first load the boostrap.js (you can load it from your local)
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
then add your custom script
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>
I have been struggling with this problem for so long. When I run the html file by itself, the javascript runs fine and my code executes exactly as I want it to. However, when running with my Flask backend, it does not do so. My code is structured almost exactly like this repo.
Also note that Jinja could be causing this problem, but once again Jinja syntax still works when the HTML file is run by itself. Please help. This is the html file:
{% extends 'layout.html' %}
{% block styles %}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/request.css">
{% endblock %}
{% block content %}
<body>
<!-- Overlay req -->
<div id="reqoverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- × -->
×
<div class="container">
<form id="contact" action="/" method="POST">
<h3>Request help in your neighborhood</h3>
<div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
{% if form.name.errors %}
<ul class="errors">
{% for error in form.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field">{{ form.email.label }} {{ form.email }}
{% if form.email.errors %}
<ul class="errors">
{% for error in form.email.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-field">{{ form.body.label }} {{ form.body }}
{% if form.body.errors %}
<ul class="errors">
{% for error in form.body.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{{ form.submit }}
</form>
</div>
</div>
</div>
</div>
<!-- Overlay del -->
<div id="deloverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- × -->
×
<div class="container">
<form id="contact" action="/" method="post">
<h3>Deliver and help in your neighborhood</h3>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Address" type="text" tabindex="3" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-red w3-card w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
Home
Link 1
Link 2
Link 3
Link 4
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
<h1 class="w3-margin w3-jumbo">stuff</h1>
<p class="w3-xlarge">things</p>
<!-- <button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button> -->
<!-- <button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button> -->
<button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button>
<button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button>
</header>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>etc</h1>
<h5 class="w3-padding-32">etc</h5>
<p class="w3-text-grey">etc</p>
</div>
<div class="w3-third w3-center">
<i class="fa w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>
{% endblock %}
{% block javascript %}
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
console.log("qnwjfiengefvjnfji")
document.getElementById("reqclosebtn").addEventListener("click", closereqNav, false);
document.getElementById("delclosebtn").addEventListener("click", closedelNav, false);
document.getElementById("reqopenbtn").addEventListener("click", openreqNav, false);
document.getElementById("delopenbtn").addEventListener("click", opendelNav, false);
function openreqNav() {
document.getElementById("reqoverlay").style.height = "100%";
}
function opendelNav() {
document.getElementById("deloverlay").style.height = "100%";
}
function closereqNav() {
document.getElementById("reqoverlay").style.height = "0%";
}
function closedelNav() {
document.getElementById("deloverlay").style.height = "0%";
}
function addSpaces(initial){
initial = Number(initial)
result = initial.toLocaleString()
return result;
}
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
{% endblock %}
</body>
</html>
layout.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- {% include 'meta.html' %} -->
{% block styles %}{% endblock %}
<script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
</head>
<body class="{{template}}">
{% block content %}{% endblock %}
</body>
</html>
meta.html:
{% block meta %}
<meta charset="utf-8" />
<title>{{title}}</title>
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#5eb9d7" />
<link rel="shortcut icon" href="{{ url_for('static', filename='dist/img/favicon.png') }}" type="image/x-icon"/>
{% endblock %}
I will post any other files requested. I have never worked with JS or front-end development before.
It seems that you are extending the layout.html , now when you extend the it there are two blocks :-
1){% block styles %}
2){% block content %}
Now in the actual html where you have extended the layout.html you use both of these tags and even close them and then start the new tag {% block javascript %}, which is not considered by the layout.html as you have closed the tags which were declared in it.
Try this :-
layout.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- {% include 'meta.html' %} -->
{% block styles %}{% endblock %}
<script src="https://kit.fontawesome.com/e3deaeba31.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,500" rel="stylesheet">
</head>
<body class="{{template}}">
{% block javascript %}{% endblock javascript %}
{% block content %}{% endblock content %}
</body>
</html>
Htmlfile.html(in which the script is not running , above the layout.html)
{% extends 'layout.html' %}
{% block styles %}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../static/request.css">
{% endblock %}
{% block javascript %}
<script>
// Used to toggle the menu on small screens when clicking on the menu button
function myFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
console.log("qnwjfiengefvjnfji")
document.getElementById("reqclosebtn").addEventListener("click", closereqNav, false);
document.getElementById("delclosebtn").addEventListener("click", closedelNav, false);
document.getElementById("reqopenbtn").addEventListener("click", openreqNav, false);
document.getElementById("delopenbtn").addEventListener("click", opendelNav, false);
function openreqNav() {
document.getElementById("reqoverlay").style.height = "100%";
}
function opendelNav() {
document.getElementById("deloverlay").style.height = "100%";
}
function closereqNav() {
document.getElementById("reqoverlay").style.height = "0%";
}
function closedelNav() {
document.getElementById("deloverlay").style.height = "0%";
}
function addSpaces(initial){
initial = Number(initial)
result = initial.toLocaleString()
return result;
}
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
{% endblock javascript %}
{% block content %}
<!-- Overlay req -->
<div id="reqoverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- × -->
×
<div class="container">
<form id="contact" action="/" method="POST">
<h3>Request help in your neighborhood</h3>
<div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
{% if form.name.errors %}
<ul class="errors">
{% for error in form.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div onchange="this.value=addSpaces(this.value)" pattern="[0-9]{3} [0-9]{3} [0-9]{4}" class="form-field">{{ form.email.label }} {{ form.email }}
{% if form.email.errors %}
<ul class="errors">
{% for error in form.email.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-field">{{ form.body.label }} {{ form.body }}
{% if form.body.errors %}
<ul class="errors">
{% for error in form.body.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{{ form.submit }}
</form>
</div>
</div>
</div>
</div>
<!-- Overlay del -->
<div id="deloverlay" class="overlay">
<div class="overlay-content">
<div class="nerb">
<!-- × -->
×
<div class="container">
<form id="contact" action="/" method="post">
<h3>Deliver and help in your neighborhood</h3>
<fieldset>
<input placeholder="Your name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input onkeypress="return isNumberKey(event);this.value=addSpaces(this.value)" placeholder="Your Phone Number" type="tel" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Your Address" type="text" tabindex="3" required>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-red w3-card w3-left-align w3-large">
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
Home
Link 1
Link 2
Link 3
Link 4
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
<!-- Header -->
<header class="w3-container w3-red w3-center" style="padding:128px 16px">
<h1 class="w3-margin w3-jumbo">stuff</h1>
<p class="w3-xlarge">things</p>
<!-- <button onclick="javascript:openreqNav()" id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button> -->
<!-- <button onclick="javascript:opendelNav()" id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button> -->
<button id="reqopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Request Help</button>
<button id="delopenbtn" class="w3-button w3-black w3-padding-large w3-large w3-margin-top">Give Help</button>
</header>
<!-- First Grid -->
<div class="w3-row-padding w3-padding-64 w3-container">
<div class="w3-content">
<div class="w3-twothird">
<h1>etc</h1>
<h5 class="w3-padding-32">etc</h5>
<p class="w3-text-grey">etc</p>
</div>
<div class="w3-third w3-center">
<i class="fa w3-padding-64 w3-text-red"></i>
</div>
</div>
</div>
{% endblock content %}
and also don't put body and html after extending any template as it is pre mentioned in the extended template.Hope this works!!
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
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 am trying to send an AJAX post request to a view but I am getting an Http500 error for some reason.
Here is the AJAX function:
function update_coins() {
$.ajax({
method: "POST",
url: "/coins",
data: {"coins": transaction},
success: function(data) {
console.log('yay')
$( ".status" ).contents()[0].textContent = "Balance: " + data.coins
}
})
};
and I copy+pasted the necessary Django CSRF code above it.
The error I am getting is:
django.urls.exceptions.NoReverseMatch: Reverse for 'login' not found. 'login' is not a valid view function or pattern name.
"POST /coins HTTP/1.1" 500 59
I'm guessing that this has something to do with my urls.py.
Here is my root app's urls.py:
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^home$', views.home, name='home'),
url(r'^coins$', views.update_coins, name='coins'),
url(r'^shop', include('shop.urls', namespace='shop')),
url(r'^users/', include('users.urls', namespace='users')),
url(r'^oauth/', include('social_django.urls', namespace='social')),
]
Here is my shop app's urls.py:
urlpatterns = [
url(r'^', views.shop, name='shop'),
]
and finally my users app's urls.py
urlpatterns = [
url(r'^login/$', views.login_view, name='login'),
url(r'^logout/$', views.logout_view, name='logout'),
url(r'^change-password/$', views.change_password, name='change_password'),
url(r'^register/$', views.register, name='register'),
]
Thank you!
EDIT 1: Added templates
The base html:
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}{% endblock %}</title>
<link rel="shortcut icon" href="{% static 'assets/favicon.png' %}"/>
<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet">
<link href="{% static 'css/bootstrap-social.css' %}" rel="stylesheet">
<link href="{% static 'base.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aladin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
{% block head-extras %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-toggleable-md bg-white">
<div class="container">
<a href="/home" class="navbar-brand">
<h1 id="logo" class="nav-wel">Pomodoro</h1>
</a>
{% if request.user.is_authenticated %}
<span class="status">Balance: {{ request.user.profile.coins }}<img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto"></span>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle welcome nav-wel" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="welcome">Welcome {{ user.get_username }}</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="/shop">Shop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Leaderboard</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/change-password">Change Password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/users/logout">Logout</a>
</div>
</li>
</ul>
{% endif %}
</div>
</nav>
{% block content %}
{% endblock %}
<script src="{% static 'js/jquery-3.2.1.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<script src="{% static 'js/pomodoro.js' %}"></script>
</body>
</html>
The shop html:
<!DOCTYPE html>
{% extends "base.html" %}
{% load staticfiles %}
{% block title %}Pomodoro{% endblock %}
{% block content %}
{% if request.GET.success %}
<div class="modal" id="logout-modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-success main" role="alert">
<p><b>You have successfully changed your password.</b></p>
</div>
</div>
</div>
</div>
</div>
{% endif %}
<audio id="coin-sound">
<source src="{% static 'assets/coin.mp3' %}">
</audio>
<div class="row centre-v">
<div class="card clock-card">
<div class="card-block">
<span class="motivation">Work hard, play hard.</span>
<div class="clock-timer" id="clock-timer">
<span class="minutes"></span>:<span class="seconds"></span>
</div>
<div class="options">
<button class="btn btn-success btn-lg start-pomodoro">Start Pomodoro</button>
<button class="btn btn-info btn-lg start-break1 hidden">Start Break</button>
<button class="btn btn-info btn-lg start-break2 hidden">Start Break</button>
<button class="btn btn-danger btn-lg reset hidden">Reset</button>
</div>
</div>
</div>
</div>
{% endblock %}
EDIT 2: My views.py:
#login_required(login_url='/users/login')
def update_coins(request):
"""
Function based view for increasing/decreasing a user's coin balance
"""
try:
user = request.user
except User.DoesNotExist:
raise Http404("No user matches the given query.")
if request.is_ajax() and request.method=='POST':
amount = request.POST.get("coins", 5)
user.profile.coins += amount
user.save()
return JsonResponse({'coins': user.profile.coins})
else:
raise Http404
It could be that your user app urls are overwriting the default login reverse view. Try renaming the login url name in users app's urls.py to something else and see if that works.