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)
Related
I have the following base.html and navbar.html files and I am trying to add the Dropdown Menu portion to my Navbar. The menu shows up, but does not 'dropdown' or respond at all to a click. My troubleshooting led me to other posts where I added the following lines to my navbar.html file with no luck. I also tried adding it to the beginning (and end) of the other scripts in my base.html with no change either.
JQuery
<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>
base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<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">
{% comment %} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> {% endcomment %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="{% static 'css/base.css' %}" rel="stylesheet">
{% block extracss %}{% endblock %}
<title>{% block title %}title{% endblock title %}</title>
</head>
<body style='background-color:#e7e7e7;'>
{% include 'include/navbar.html' %}
<div class='row' style='background-color: orange;'>
<div class='column' style='padding-left:35px ;float: left; width:17%;background-color: #f1f1f1;'>
test
</div>
<div class='column' style='float: right; width:83%;background-color: #e7e7e7; padding:25px'>
{% block content %}{% endblock content %}
</div>
</div>
{% include 'cms/modal/modal.html' %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{% static 'cms/js/ajax.js' %}"></script>
{% block extrajs %}{% endblock extrajs %}
</body>
</html>
navbar.html
{% load static %}
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand"
href="{% if user.is_staff or user.is_superuser %}{% url 'admin:index' %}{% else %}{% url 'app:home' %}{% endif %}">
<img src="{% static 'img/bootstrap-solid.svg' %}" width="21" height="21" alt="Logo" class="mr-2 mt-n1">xxx
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
</ul>
<a class="nav-link" href="{% url 'account:logout' %}"> Sign out <i class="fas fa-sign-out-alt"></i></a>
</div>
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Menu</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</nav>
There are a number of issues here:
You're importing JQuery twice. Once in JQuery and once in base. Remove the slim one from your JQuery.
You are importing Bootstrap CSS for 4.0.0, but JS for 4.6.0. You need to use the same version for both CSS and JS.
You are using the syntax data-* and also data-bs-*. The first one is for Bootstrap 4 and the latter one is for Bootstrap 5. You cannot mix these. Choose 1 version and go with it.
Here are the import links for Bootstrap 5:
CSS: <link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS: <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
And here's a sample B5 dropdown:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
B5 Dropdown Documentation
Note: If you are only importing the JQuery for Bootstrap, then you can remove that as well since B5 doesn't need JQuery.
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/
I am writing code for a animated hamburger icon for the bootstrap navbar, but need to toggle both the hamburger icon and the bootstrap repsonsive navbar. So is there some code or some way to toggle both pieces of data at different ids. Also, I can't use javascript because the bootstrap navbar doesn't have the sliding animation when toggling it through javascript.
Here is the code I have already for targeting the navbar collapse feature.
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="\static\base\css\hamburgers.css" rel="stylesheet">
<link href="\static\base\css\navbar.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<button class="hamburger hamburger--squeeze" height="15" id="hamburger" data-target="#collapsibleNavbar" data-toggle="collapse">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class=" navfont navbar-brand mx-auto" href="/account">Gucci Enterprises</a>
<div class="navshow">
{% if user.is_authenticated %}
Logout
{% else %}
<a href="/account/login" class="navfont important" >Login</a>
{% endif %}
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<div class="container">
<div style="text-align: center">
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile/edit">Edit Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/change-password">Change Password</a>
</li>
</ul>
{% else %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/reset-password">Reset Password</a>
</li>
</ul>
{% endif %}
</div>
</div>
</div>
<div class="navhide">
{% if user.is_authenticated %}
Logout
{% else %}
Login
{% endif %}
</div>
</nav>
<br>
{% block body %}
{% endblock %}
</body>
</html>
'''
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button class="btn btn-primary" data-toggle="collapse" data-target=".it-works">It Works</button>
<div class="collapse it-works">Yep.</div>
<div class="collapse it-works">It works.</div>
Add a class like .multi-collapse on the elements that should toggle and use data-target=".multi-collapse" with a class instead of an id. The bootstrap collapse component multiple targets documentation says you can reference them using a JQuery selector and includes a working example.
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"
I would like to create the links of the menu dynamically based on the Category models. I've used DetailView and ListView for create a list and detail page of a single category and it run fine.
Now I would like to see in base.html a new link in a "dropdown" menu every time the user add a new Category.
This is base.html
{% load static %}
<!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 head_title %}Test{% endblock head_title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'list_tag' %}">Tag</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for category in category_list %}
{{ category.category_name }}
{% endfor %}
</div>
</li>
</div>
</nav>
<div class="container">
<!-- INIZIO corpo centrale -->
{% block content %}
{% endblock content %}
<!-- FINE corpo centrale -->
</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
This is list_category.html
{% extends 'base.html' %}
{% load static %}
{% block head_title %}Elenco Categorie | {{ block.super }}{% endblock head_title %}
{% block content %}
{% for category in category_list %}
<h1>{{ category.category_name }}</h1>
<hr>
{% endfor %}
{% endblock content %}
This is views.py
class CategoryList(ListView):
model = Category
context_object_name = 'category_list'
template_name = "list_category.html"
class SingleCategory(DetailView):
model = Category
template_name = "single_category.html"
When I use the code in base.html it was shown an empty menu.
How I can resolve?
UPDATE:
Using the solution of #ans2human in this post, I've created a file context_processors.py like below:
from .models import Category
def blog_menu(request):
link_menu = Category.objects.all()
return {
'link_menu': link_menu
}
Then I've added the string in settings.py:
'blog.context_processors.blog_menu',
The new strings of dropdown menu are these:
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-newspaper" id="img"></i> Blog
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></i> {{ link_menu }}</a>
</div>
</li>
Now I've this situation in the menu
It seems that work but not correctly. How I can resolve?
UPDATE 2
Good news!
Since I'm not a django expert, I had a trivial difficulty. By reasoning a little more, I found the solution.
Below the solution:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for link in link_menu %}
<a class="dropdown-item" href="{{ link.get_absolute_url }}"> {{ link.category_name }}</a>
{% endfor %}
</div>
def get_url(self):
return reverse('product-by-category',args=[self.slug])
{% for menu in links %}
<a class="dropdown-item" href="{{menu.get_url}}">{{menu.category_name}}</a>
{% endfor %}