I have a specific requirement - say I hit the url as below -
http://127.0.0.1:8000/brand_product_list/1
in the above url the last 1 is a brand-id and I need this brand-id to be available to all the templates for eg. if I call
my brand_product_list looks like below in views.py -
# Product List as per Brand1
def brand_product_list(request,brand_id):
brandid = brand_id
brand_b=Brand.objects.get(id=brand_id)
cats_b=Product.objects.filter(brand=brand_b).distinct().values('category__title','category_id')
data_b=Product.objects.filter(brand=brand_b).order_by('-id')
colors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('color__title','color__id','color__color_code')
sizes_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('size__title','size__id')
flavors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('flavor__title','flavor__id')
return render(request,'brand_product_list.html',
{
'data_b':data_b,
'brandid':brandid,
'cats_b':cats_b,
'brand_b':brand_b,
'sizes_b':sizes_b,
'colors_b':colors_b,
'flavors_b':flavors_b,
})
in the above code I need brandid to be available in cart.html which is called from clicking cart button in base.html which is extended in brand_product_list.html
point is since base.html is extended in brand_product_list.html, the brandid is available to base.html (means child variable available in parent) and I can filter stuff based on brand but somehow when I click on cart button in base.html, the same brandid is not taken to cart.html even though base.html is extended in cart.html (means parent variable not available in child).
I tried include as below
{% include "./brand_product_list.html" %}
but since in brand_product_list.html, there is some filter.html, it throws error that argument is not available --
NoReverseMatch at /cart
Reverse for 'filter_data_b' with arguments '('brandid',)' not found. 1 pattern(s) tried: ['filter_data_b/(?P<brand_id>[0-9]+)$']
Request Method: GET
Request URL: http://127.0.0.1:8000/cart
Django Version: 3.2.8
Exception Type: NoReverseMatch
Exception Value:
Reverse for 'filter_data_b' with arguments '('brandid',)' not found. 1 pattern(s) tried: ['filter_data_b/(?P<brand_id>[0-9]+)$']
Exception Location: C:\Users\j1011470\Documents\Personal\Business\env\lib\site-packages\django\urls\resolvers.py, line 694, in _reverse_with_prefix
Python Executable: C:\Users\j1011470\Documents\Personal\Business\env\Scripts\python.exe
Python Version: 3.8.8
Python Path:
['C:\\Users\\j1011470\\Documents\\Personal\\Business\\Pitaara',
I request you to please help in this situation..
Any possibility of using context_processor with request and one argument ? or some other way...
cart.html which gets called on the click on cart button in base.html is below -
{% extends './base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'custom.js' %}"></script>
<main class="container my-4" id="cartList">
<!-- Featured Products -->
<h3 class="my-4 border-bottom pb-1">Cart ({{totalitems}})</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for product_id,item in cart_data.items %}
<tr>
<td>
<img src="/media/{{item.image}}" width="50" />
<p>{{item.title}}</p>
</td>
<td>
<input type="number" class="product-qty-{{product_id}}" value="{{item.qty}}" style="vertical-align: bottom;" />
<button class="btn btn-sm btn-primary update-item" data-item="{{product_id}}"><i class="bi bi-arrow-clockwise"></i></button>
<button class="btn btn-sm btn-danger delete-item" data-item="{{product_id}}"><i class="bi bi-trash"></i></button>
</td>
<td>$ {{item.price}}</td>
<td>$ {% widthratio item.price 1 item.qty %}</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<th>Total</th>
<th>Rs. {{total_amt}}</th>
</tr>
{% if totalitems %}
<tr>
<td colspan="4" align="right">
Checkout <i class="fa fa-long-arrow-alt-right"></i>
</td>
</tr>
{% endif %}
</tfoot>
</table>
</main>
{% endblock %}
base.html is below
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{% block title %}Delicious Doughnuts{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<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/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.6.1/font/bootstrap-icons.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white border-bottom">
<div class="container-fluid">
<a class="navbar-brand" href="#">Delicious</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
{% if brandid %}
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="/brand_product_list/{{brandid}}">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="/brand_product_list/{{brandid}}">Link</a>
</li>
{% elif cart_data.items %}
{% for productid, item in cart_data.items %}
{% if forloop.first %}
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="/brand_product_list/{{item.brandid}}">Home</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
</ul>
<form class="d-flex">
<a aria-current="page" href="{% url 'cart' %}"><i class="bi bi-cart3" style="font-size: 1.5rem; color: cornflowerblue;"></i>Cart (<span class="cart-list">{{request.session.cartdata|length}}</span>)</a>
<ul>
<li class="nav-item dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" id="navbarDropdown" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bi bi-user"></i> My Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% if user.is_authenticated %}
<a class="dropdown-item" href="d">Dashboard</a>
<a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="dropdown-item" href="{% url 'login' %}">Login</a>
<a class="dropdown-item" href="Signup">Signup</a>
{% endif %}
</div>
</li>
</ul>
</form>
</div>
</div>
</header>
<div id="content">
{% block content %}
{% endblock %}
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top container">
<div class="row">
<div class="col-12 col-md">
Delicious Doughnuts
<small class="d-block mb-3 text-muted">© 2017-2020</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Cool stuff</a></li>
<li><a class="text-muted" href="#">Random feature</a></li>
<li><a class="text-muted" href="#">Team feature</a></li>
<li><a class="text-muted" href="#">Stuff for developers</a></li>
<li><a class="text-muted" href="#">Another one</a></li>
<li><a class="text-muted" href="#">Last time</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>Resources</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Resource</a></li>
<li><a class="text-muted" href="#">Resource name</a></li>
<li><a class="text-muted" href="#">Another resource</a></li>
<li><a class="text-muted" href="#">Final resource</a></li>
</ul>
</div>
<div class="col-6 col-md">
<h5>About</h5>
<ul class="list-unstyled text-small">
<li><a class="text-muted" href="#">Team</a></li>
<li><a class="text-muted" href="#">Locations</a></li>
<li><a class="text-muted" href="#">Privacy</a></li>
<li><a class="text-muted" href="#">Terms</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
also the base.html code has href="{% url 'cart' %}" for which the url.py is
path('cart',views.cart_list,name='cart'),
views.py having above cart_list.html is -
# Cart List Page
def cart_list(request):
total_amt=0
if 'cartdata' in request.session:
for p_id,item in request.session['cartdata'].items():
total_amt+=int(item['qty'])*float(item['price'])
return render(request, 'cart.html',{'cart_data':request.session['cartdata'],'totalitems':len(request.session['cartdata']),'total_amt':total_amt})
else:
return render(request, 'cart.html',{'cart_data':'','totalitems':0,'total_amt':total_amt})
I tried stuff, some worked some didn't - I feel the way to do is to save the brandid in the session, the moment the url is hit like below -
# Product List as per Brand1
def brand_product_list(request,brand_id):
request.session['prod_brand'] = brand_id
brandid = brand_id
brand_b=Brand.objects.get(id=brand_id)
cats_b=Product.objects.filter(brand=brand_b).distinct().values('category__title','category_id')
data_b=Product.objects.filter(brand=brand_b).order_by('-id')
colors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('color__title','color__id','color__color_code')
sizes_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('size__title','size__id')
flavors_b=ProductAttribute.objects.filter(brand=brand_b).distinct().values('flavor__title','flavor__id')
return render(request,'brand_product_list.html',
{
'data_b':data_b,
'brandid':brandid,
'cats_b':cats_b,
'brand_b':brand_b,
'sizes_b':sizes_b,
'colors_b':colors_b,
'flavors_b':flavors_b,
'prodbrand':request.session['prod_brand'],
})
i'm making my blog site via django.
but plus icon is not working in post.html :(
what is wrong?
directory path is blog/templates/base.html, blog/templates post.html
What I've tried to do:
move the <div class "page-header"> to post.html
If you need any information I didn't provide, please ask and I will. Guys, what is wrong? Thanks in advance for any help!
base.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<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 href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{% static 'blog/style.css' %}">
<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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Django Project</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" ariacontrols="navbarSupportedContent" aria-expanded="false" aria-lable="Toggle navigation">
<span class="navbar-toggle-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 'home:home' %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'polls:index' %}">Polls <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'bookmark:list' %}">Bookmark <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="{% url 'blog:post_list' %}">Blog <span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<div class="page-header">
{% if user.is_authenticated %}
<span class="glyphicon glyphicon-plus"></span>
{% endif %}
<h1>Blog</h1>
</div>
<div class="content container">
<div class="row">
<div class="col-md-8">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
</html>
post.html
{% extends 'blog/base.html' %}
{% block content %}
{% for post in posts %}
<div class="post">
<div class="date">
<p>{{ post.published_date }}</p>
</div>
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
{% endblock %}
I have no idea with this problem..
Navbar's Dropdown doesn't work! with this message
enter image description here
this is my code
<head>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{%url 'home'%}">Portfolio</a>
<a class="dropdown-item" href="{%url 'signup'%}">회원가입</a>
<a class="dropdown-item" href="{%url 'login'%}">로그인</a>
<a class="dropdown-item" href="#">로그아웃</a>
</div>
</li>
</ul>
</div>
</nav>
{%block contents%}
{%endblock%}
I think Bootstrap CDN is not correct you are missing something.
try this & tell is it working?
<!-- CSS only -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- JS, Popper.js, 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/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
why don't you try scripts tags in the bottom of the file.
you should add scripts tags after </body> tag.
I have an error in my template. I have tried to see where I've gone wrong, but couldn't identify the bug.
This is index.1.html:
{% extends 'clinic/clinicbase.html' %}
{% load static %}
{% block content %}
{% if username %}
<div class="jumbotron">
<div class="container">
<h3>Welcome, Dr {{ name }}</h3>
<p>You can manage your clinics here:</p>
<p><a class="btn btn-primary btn-sm" href="#" role="button">Learn more »</a></p>
</div>
</div>
{% if nodoc}
{% if clinics %}
{% for clinic in clinics %}
<div class="col-sm-8 card-deck">
<div class="card mb-3 mr-3 ml-3 shadow bg-white rounded">
<div class="card-body">
<div id="id" style="display: none;">{{ clinic.clinicid }} </div>
<h2 class="card-title">
{{ clinic.name}}
</a>
</h2>
<h6 class="card-subtitle mb-2 text-muted">Label: {{ clinic.label }}</h6>
<p class="card-text">Phone: {{ clinic.mobile }}</p>
<p class="card-text">About Clinic: {{ clinic.about }}</p>
<p class="card-text">Website: {{ clinic.website }}</p>
<div id="docbtngp" class="d-flex flex-row">
<a href="/appointments/doctor/edit/{{ doc.docid }}" class="btn btn-primary mr-1 mybtndocedit" data-id="{{ doc.docid }}">
<i class="fas fa-user-edit"></i>
</a>
<a href="/appointments/doctor/appointments/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnviewapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar"></i>
</a>
<a href="/appointments/doctor/appointment/add/{{ doc.docid }}" class="btn btn-primary mr-1 mybtnaddapp"
data-id="{{ doc.docid }}">
<i class="fas fa-calendar-plus"></i>
</a>
<a href="/appointments/doctor/remove/{{ doc.docid }}" class="btn btn-danger mr-1 mybtndel" data-id="{{ doc.docid }}">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not a member of any clinic. If you are an administrator, you can add yourself to a clinic here.
</div>
{% endif %}
{% else %}
<div class="alert alert-danger" role="alert">
You are not registered as a doctor in the system. Please contact Support..
</div>
{% endif %}
{% else %}
<div class="container bg-light">
<p>You are not authorized. Please login.</p>
{% endif %}
</div>
{% endblock %}
This is clinic/clinicbase.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">
{% include "clinic/common_css.html" %}
{% block cssblock %}
{% endblock %}
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div id="navbar">
{% block navbar %}
{% include "clinic/topbar.html" with screen="newappointment" %}
{% endblock %}
</div>
<nav aria-label="breadcrumb">
<ol id="breadcrumb" class="breadcrumb">
{% block breadcrumb %}{% endblock %}
</ol>
</nav>
{% block content %}
{% endblock %}
{% include "clinic/common_js.html" %}
{% block jsblock %}
{% endblock %}
</body>
</html>
clinic/topbar.html:
<header>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="/"><i class="fas fa-plus"></i> Mysite</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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-user-md"></i> Clinic
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/"><i class="fas fa-car"></i> Waiting Patients</a>
<a class="dropdown-item" href="/clinic/seen" id="BtnPatientsSeen"><i class="fas fa-check-square"></i>
Seen Patients</a>
<a class="dropdown-item" href="/clinic/newclinic" id="AddNewClinic"><i class="fas fa-check-square"></i>
Add new clinic</a>
<a class="dropdown-item" href="/clinic/clinics" id="ListClinics"><i class="fas fa-check-square"></i>
Show Clinics</a>
<a class="dropdown-item" href="/clinic/permissions" id="SetPermissions"><i class="fas fa-check-square"></i>
Set mapping and permissions</a>
</div>
</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">
<i class="fas fa-address-book"></i> Registration
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/clinic/register" id="registration"><i class="fas fa-clipboard"></i>
Register Patient</a>
<a class="dropdown-item" href="/clinic/checkin"><i class="fas fa-clipboard-check"></i> Checkin Patient</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" id="listRegistered" href="#"><i class="fas fa-list"></i> List Registered
Patients</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/appointments/getappointment" id="appointment"><i class="fas fa-calendar-plus"></i> Appointments
</a>
</li>
{% if user.is_authenticated %}
<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">
Welcome, {{ user.get_username }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'logout'%}?next={{request.path}}"><i class="fas fa-sign-out-alt"></i>
Logout</a>
<a class="dropdown-item" href="/clinic/myprofile"><i class="fas fa-user-alt"></i> My Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/appointments/myappointments"><i class="fas fa-calendar"></i> My Appointments</a>
</div>
</li>
{% else %}
<li class="nav-item active">
<a class="nav-link" href="{% url 'login'%}?next={{request.path}}"><i class="fas fa-key"></i> Login
</a>
</li>
{% endif %}
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
clinic/common_css.html:
{% load static %}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static 'clinic/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/datepicker.0.6.5.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fontawesome.5.2.0.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.structure.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/jquery-ui/jquery-ui.theme.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/fullcalendar.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/calcustomcolors.css' %}?dev={{ rnd_num }}">
<link rel="stylesheet" href="{% static 'appointments/propellor/typography.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/materialicons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/floating-action-button.css' %}">
<link rel="stylesheet" href="{% static 'appointments/propellor/google-icons.css' %}">
<link rel="stylesheet" href="{% static 'appointments/css/mytheme.css' %}">
clinic/common_js.html:
{% load static %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="{% static 'appointments/js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'appointments/js/jquery-ui/jquery-ui.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/popper.min.js' %}"></script>
<script src="{% static 'appointments/js/bootstrap.min.js' %}"></script>
<script src="{% static 'appointments/js/notify.0.4.2.js' %}"></script>
<script src="{% static 'appointments/js/datepicker.0.6.5.js' %}"></script>
<script src="{% static 'appointments/lib/moment.min.js' %}"></script>
<script src="{% static 'appointments/js/fullcalendar.js' %}"></script>
<script src="{% static 'appointments/js/search.js' %}?dev={{ rnd_num }}"></script>
<script src="{% static 'appointments/js/appointment.js' %}?dev={{ rnd_num }}"></script>
The error I get is:
In template /home/joel/myappointments/appointments/templates/clinic/index.1.html, error at line 60
Invalid block tag on line 60: 'else', expected 'endblock'. Did you forget to register or load this tag?
Is there an obvious bug in the template?
{% if nodoc} on line 12 - you're missing a %, this line should be {% if nodoc %}.
I want my main content and Sidewidget in the same row. With my knowledge of bootstrap grid, I tried to make this work but the sidewidget is stacking below the content and not in the sides. Here is the required snippets.
body.html
<!-- Navigation -->
{% include 'nav.html' %}
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'js/tinymce/tinymce.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/tinymce/custom.js' %}" ></script>
nav.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
My {% block content %}
{% for post in posts %}
<h2 class="mt-4">{{post.title}}</h2>
<!-- Author -->
<p class="lead">
by
{{post.author}}
</p>
<hr>
<!-- Date/Time -->
<p class="lead">Published on <b>{{post.published_date}}</b></p>
<hr>
<!-- Preview Image -->
<img class="img-fluid" src="{{post.image.url}}" alt="Img Placeholder">
<p>{{post.images}}</p>
{% for tag in post.tags.all %}
<p>{{tag.name}}</p>
{% endfor %}
<hr>
<!-- Post Content -->
<p class="lead">{{post.content|safe|truncatewords:"60"|linebreaks}}</p>
<footer class="entry-footer">
<button class="btn btn-primary">Read More</button>
</footer>
<hr>
{% empty %}
<h1> Nothing to display</h1>
{% endfor %}
{% endblock %}
My {% Sidewidget %} block
<!-- Search Widget -->
<div class="card my-4">
<h5 class="card-header">Search</h5>
<div class="card-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</div>
</div>
<!-- Categories Widget -->
<div class="card my-4">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<div class="row">
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
Web Design
</li>
<li>
HTML
</li>
<li>
Freebies
</li>
</ul>
</div>
<div class="col-lg-6">
<ul class="list-unstyled mb-0">
<li>
JavaScript
</li>
<li>
CSS
</li>
<li>
Tutorials
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Side Widget -->
<div class="card my-4">
<h5 class="card-header">Side Widget</h5>
<div class="card-body">
You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
</div>
</div>
{% endblock %}
I have tried tweaking but nothing seems to work
I want the page like this:
|*****************************|
|navigationbar |
|*****************************|
|Post1(Col1-Col8) |SIDEWIDGET|
|***** | |
|Post2(Col1-Col8) | |
|***** | |
|PostN(Col1-Col8) | |
|*****************************|
|Footer |
Your code should work. The col-lg-* modifier applies only for screens that are over 1200px wide as per bootstrap's documentation. Maybe you're using a smaller screen and you also need to add the col-sm and col-md modifiers. Please try those and let me know if it works.
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-8 ">
{% block content %}
{% endblock %}
</div>
<div class="col-sm-4 col-lg-4">
{% block sidewidget %}
{% endblock %}
</div>
</div>
</div>
you can't use a bootstarp grid system for it because the sidewidget is going to take up the column of the whole three rows .You would have to use flex box for it. by using grid system columns can be individually used in different rows but you cannot have a whole column spanning over the different rows .
In the 'nav' section the 'nav' tag is not closed </nav>. close it and try again.
I think that will solve your problem.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'add' %}">Add Article</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>