I deployed an ecommerce website on the live server using heroku but having issue with product images as they are not being displayed.
The website is working fine on the local host but causing problem when being deployed online. I inspected the html code and found out that the live website doesn't show the jinja for loop template which is added to the html file. Can anyone please guide me on how to solve this issue?
Here is the link to the website,https://ahad-ecommerce-website.herokuapp.com/ and also the code snippet for the html file
main.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title> Ecom </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/main.css'%}">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<script type="text/javascript">
var user = '{{request.user}}'
function getToken(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getToken('csrftoken');
function getCookie(name) {
// Split cookie string and get all individual name=value pairs in an array
var cookieArr = document.cookie.split(";");
// Loop through the array elements
for(var i = 0; i < cookieArr.length; i++) {
var cookiePair = cookieArr[i].split("=");
/* Removing whitespace at the beginning of the cookie name
and compare it with the given string */
if(name == cookiePair[0].trim()) {
// Decode the cookie value and return
return decodeURIComponent(cookiePair[1]);
}
}
// Return null if not found
return null;
}
var cart = JSON.parse(getCookie('cart'))
if(cart == undefined){
cart = {}
console.log('Cookie was created')
document.cookie = 'cart=' + JSON.stringify(cart) + ";domain=;path=/"
}
console.log('Cart:', cart)
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{% url 'store' %}">Ecom</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url 'store' %}">Store <span class="sr-only">(current)</span></a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
Login
<a href="{% url 'cart' %}">
<img id="cart-icon" src="{% static 'images/cart.jpg' %}">
</a>
<p id="cart-total">{{cartItems}}</p>
</div>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content%}
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</body>
</html>
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row">
{% for product in products %}
<div class="col-lg-4">
<img class="thumbnail" src="{{product.imageURL}}">
<div class="box-element product">
<h6><strong> {{product.name}} </strong></h6>
<hr>
<button data-product={{product.id}} data-action="add" class="btn btn-outline-secondary add-btn update-cart">Add to cart</button>
<a class="btn btn-outline-success" href="#"> View </a>
<h4 style="display: inline-block;float: right"><strong> ${{product.price|floatformat:2}} </strong></h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Thanks
Related
I am working on a web page displaying a table below a navigation bar. The table on the page is generated from data coming from a database. The page as such does what it is supposed to do, but the table hosting the data is not left aligned on the page, but has a lot of white space to its left.
The Python/Flask-part of the code looks like this, data from the database comes as pandas DataFrame:
from flask import Flask, render_template
import DBConnector
from jinja2 import Environment
import pandas as pd
app = Flask(__name__)
app.jinja_options = {'lstrip_blocks': True, 'trim_blocks': True}
app.create_jinja_environment()
#app.route('/')
def index():
connector = DBConnector()
df: pd.DataFrame = connector.getData()
return render_template('index.html', tables=[df.to_html(classes='data', header=True)])
I borrowed the index.html code from a Stackoverflow post:
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %}Table Viewer{% endblock %}</h1>
{% for table in tables %}
{{ table|safe }}
{% endfor %}
{% endblock %}
which extends the file base.html:
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
<div class="container" align="left">
{% block content %}
{% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The output looks like this:
How can I remove the large white space to the left of the table?
I am new to DJango but have experience with Python. I am creating a Notes Sharing Site. Idea is users will upload notes, admin will accept it and only accepted notes are public. The user can see all of its notes including the pending and rejected ones.
Problem:
Admin is able to see all the users. I am heavily using bootstrap for design because I am trying to focus on back-end. I am using bootstrap tables of viewing the users and viewing the notes ( viewing notes works perfectly because I am not using data table in that table ). Real problem is in viewing users ( by admin ), normal bootstrap table is working perfectly but it is not being modified by data-table. I have not used data able in past it is my first time.
HTML code:
view_users.html
{% extends 'admin_core.html' %}
{% load static %}
{% block head %}
<style>
td {
text-transform: capitalize;
}
</style>
<scirpt type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></scirpt>
<scirpt type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></scirpt>
<scirpt type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></scirpt>
<link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
<script>
$(document).ready(function() {
$('#user-table').DataTable();
});
</script>
{% endblock head %}
{% block body %}
<div class="container">
<h2 class="text-center my-4">Users</h2>
<div class="table-responsive">
<table class="table table-bordered md-2" id="user-table">
<thead class="thead-dark">
<tr>
<th>Sr. No.</th>
<th>Full Name</th>
<th>Email Address</th>
<th>Contact</th>
<th>Branch</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ forloop.counter }}</td>
<td>
{{ user.user.first_name }} {{ user.user.last_name }}
</td>
<td
class="align-middle"
style="text-transform: none !important"
>
{{ user.user.username }}
</td>
<td>{{ user.contact }}</td>
<td>{{ user.branch }}</td>
<td>{{ user.role }}</td>
<td>
<a
role="button"
class="btn btn-danger btn-sml"
href="{% url 'delete_user' user.user.id %}"
onclick="return confirm('Are you sure?')"
>Delete</a
>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endblock body %}
As this page extends admin_core.html, its code:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required ( not really ) meta data tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Notes Sharing Site - Admin</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<!-- Our own CSS -->
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<!-- Head Block ( to extend the page ) -->
{% block head %}
{% endblock head %}
</head>
<body style="padding-top: 50px;">
<!-- Bootstrap Navigation Bar -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand mb-0 h1" href="{% url 'admin_home' %}">
<img src="{% static 'images/icon.png' %}" width="30" height="30" class="d-inline-block align-top" alt="">
Notes Sharing Site - Admin
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- <span class="sr-only">(current) -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'home' %}">Public Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin_home' %}">Admin Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="admin/">DJango Admin</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="view-notes" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View Notes
</a>
<div class="dropdown-menu" aria-labelledby="view-notes">
<a class="dropdown-item" href="#">All</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Pending</a>
<a class="dropdown-item" href="#">Accepted</a>
<a class="dropdown-item" href="#">Rejected</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'view_users' %}">View Users</span></a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="btn btn-danger my-2 my-sm-0" href="{% url 'logout' %}">Logout</a>
</form>
</div>
</nav>
<!-- Body Block ( to extend the page ) -->
{% block body %}
{% endblock body %}
<!-- Bootstrap JavaScript and JQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
-->
</body>
</html>
Sorry for spelling mistake ( English is not my first language ) and any noob coding problems. Thanks!
Did you follow the debug or production version for static files? If the debug one then you need the special url paths and if the production one then you need to have STATIC_ROOT path in your settings.py that points to the static directory where the files will be collected with collectstatic command.
Or try Check adding these
import mimetypes
mimetypes.add_type("text/css", ".css", True)
I'm running a Python application in Elastic Beanstalk for test, i connect the application to DynamoDB
and creating a table
The application uses Flask FrameWork , html/css and boto3 sdk to connect to dynamo
the problem is, I can't show the table details on the page
this is a application
this is the table from dynamo
the code of application is
import json
import boto3
from flask import Flask, render_template, request
application = Flask(__name__)
def conectar_dynamo():
dynamodb = boto3.resource('dynamodb', region_name='us-east-1')
table = dynamodb.Table('posts')
return table
def scan():
table = conectar_dynamo()
response = table.scan()
data = response['Items']
while 'LastEvaluatedKey' in response:
response = table.scan(ExclusiveStartKey=response['LastEvaluatedKey'])
data.extend(response['Items'])
return data
def put_item(data):
table = conectar_dynamo()
table.put_item(
Item={
'id': data['id'],
'content': data['content'],
'title': data['title']
}
)
return 'Concluido com sucesso!'
#application.route('/')
def index():
return render_template('index.html')
#application.route('/consultar', methods=['GET'])
def consultar():
return json.dumps(scan(), default=str)
#application.route('/incluir', methods=['POST'])
def incluir():
body = request.json
res = put_item(body)
return res
if __name__ == '__main__':
application.run(host='0.0.0.0', debug=False)
and the index.html is
{% extends 'base.html' %}
{% block content %}
<h1>{% block title %} teste{% endblock %}</h1>
{% for post in posts %}
<a href="#">
<h2>{{ post['title'] }}</h2>
</a>
<span class="badge badge-primary">{{ post['created'] }}</span>
<hr>
{% endfor %}
{% endblock %}
and my base.html is
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('index')}}">Barbosa's</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Sobre</a>
</li>
</ul>
</div>
</nav>
<div class="container">
{% block content %} {% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
what am i doing wrong?
Building my first Django app from a tutorial, following the instructions pretty much verbatim but my navbar dropdown menu is not working no matter what I try, so unable to log out or change password from the navbar.
I am very new to js, but some things I have tried:
Experimenting w different browsers (doesn't work for Safari or Chrome)
Have looked at similar questions and implemented those techniques but it's still not working (linking to js in the head, making sure to link to js/popper/bootstrap in the correct order, etc.):
django bootstrap dropdown not working
Have also attempted to create static folders in pages/static/js and pages/static/css but that looks like it may be for more advanced styling than what we're going for here.
Bootstrap template not working correctly Django
Template file/directory below. Issue is between lines 55 and 68 (div class="collapse navbar-collapse")
Thanks in advance for the help.
<!-- templates/base.html -->
<!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">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAKl8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> -->
<title>{% block title %}Newspaper App{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-auto">
<li class="nav-item">+ New</li>
</ul>
{% endif %}
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
<a class="dropdown-item" href="{% url 'password_change'%}">Change password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}"> Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</body>
</html>
I copied your code and had the same problem but after swapping the bootstrap.js script for a different one it started working.
The problem was a backslash in the bootstraps js URL.
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/\ js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ\ 6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
After https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/ there is \ js/bootstrap.min.js
but it should be https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js
So when we switched to the newest js it fixed the problem but that js is still valid if you fix the path.
https://getbootstrap.com/docs/4.4/getting-started/introduction/
My collapsible navbar is not working on this basic site, and I am not sure why. I have tried to reorder the CDN scripts, copied and pasted directly from Boostrap's docs, and have double checked the code a few times. I'm sure it's a stupid mistake, but can anyone help me and point out what is happening here? The toggle button appears, but doesn't do anything when clicked. This is being used with a Django project.
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block title %}The title I'm using{% endblock title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<form class="form-inline ml-auto">
<a href="{% url 'logout' %}" class="btn btn-outline-secondary">
Log out</a>
<a href="{% url 'password_change' %}" class="btn btn-primary ml-2">
Change password</a>
Update user profile
{{ user.username }}
</form>
{% else %}
<form class="form-inline ml-auto">
<a href="{% url 'login' %}" class="btn btn-outline-secondary">
Log In</a>
<a href="{% url 'signup' %}" class="btn btn-primary ml-2">
Sign up</a>
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Incorrect attribute value in the toggle button:
data-target="navbarCollapse"
It should look like this (include the pound symbol):
data-target="#navbarCollapse"