I suspect it might be due to the version of Django installed automatically by python anywhere, but if you think it's something else, please let me know if I'm missing anything.
Here's the error message populating my page, with the accompanying code issue:
django.template.exceptions.TemplateSyntaxError: Unclosed tag on line 9: 'block'.
Looking for one of: endblock.
"GET /employee/ HTTP/1.1" 500 143845
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee</title>
</head>
<body>
{% extends 'base.html' %}
{% block content %}
<div class="row">
{% for employeess in employees %}
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ employeess.EmployeeName }}</h5>
<p class="card-text">{{ employeess.EmployeeAddress }}</p>
Go somewhere
</div>
</div>
</div>
{% endfor %}
</div>
</body>
</html>
And views.py
from django.shortcuts import render
from django.http import HttpResponse
from .models import Employee
def index(request):
employees = Employee.objects.all()
return render(request, 'index.html', {'employees': employees})
I miss the {% endblock %}
New:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Employee</title>
</head>
<body>
{% extends 'base.html' %}
{% block content %}
<div class="row">
{% for employeess in employees %}
<div class="col">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{ employeess.EmployeeName }}</h5>
<p class="card-text">{{ employeess.EmployeeAddress }}</p>
Go somewhere
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}
</body>
</html>
Related
I am writing a website on Flask, and I encountered a problem that when I send an email with a link to a password recovery page, the http address of which has a token that changes every time, the template that I connected is not generated at all. with completely wrong css styles.
Although the same template is connected in the same way to other pages and everything is fine, what is needed is generated
Here is my view function to handle this page
#app.route('/reset_password/<token>', methods=['POST', 'GET'])
def reset_token(token):
if current_user.is_authenticated:
return redirect(url_for('index_page'))
user = User.verify_reset_token(token)
if user is None:
flash('Неправильний,або застарілий токен', category='error')
return redirect(url_for('reset_password'))
form = ResetPasswordForm()
if form.validate_on_submit():
hash_password = generate_password_hash(form.password.data)
user.password = hash_password
db.session.commit()
return render_template('reset_password.html', title='Відновлення паролю', form=form,
css_link=css_file_reset_password_request_page)
For comparison, here is a function that connects to the same css-style
#app.route('/reset_password', methods=['POST', 'GET'])
def reset_password():
if current_user.is_authenticated:
return redirect(url_for('index_page'))
form = RequestResetForm()
if form.validate_on_submit():
user = User.query.filter_by(email=form.email.data).first()
if user is None:
flash('Неправильний email', category='error')
else:
send_reset_email(user)
flash('Повідомлення було надіслано на вашу електронну пошту,зайдіть туди,щоб отримати '
'інструкції', category='success')
return render_template('reset_password_request.html', title='Відновлення паролю', form=form,
css_link=css_file_reset_password_request_page)
But as a result, these pages have a completely different look
Here is the html template of this page(It is the same as reset_password_request from the previous function, only with some changes)
{% extends 'base.html' %}
{% block body %}
{{ super() }}
{% for cat, msg in get_flashed_messages(True) %}
<div class="flash {{cat}}">{{msg}}</div>
{% endfor %}
<div class="container">
<form class="box" method="POST">
{{ form.hidden_tag() }}
<h1 title="Будь ласка,придумайте новий надійний
пароль">Оновлення паролю</h1>
<div class="group">
<label>{{ form.password.label }}</label>
{{ form.password }}
</div>
<div class="group">
<label>{{ form.double_password.label }}</label>
{{ form.double_password }}
</div>
<div class="group">
<center><button>Відновити</button></center>
</div>
</form>
</div>
{% endblock %}
THIS IS MY base.html FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ css_link }}" type="text/css"/>
<script src="https://kit.fontawesome.com/b8991598b2.js"></script>
{% block title %}
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Сайт</title>
{% endif %}
{% endblock %}
</head>
<body>
<div class="content">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="search-box">
<input class="search-txt" type="text" placeholder="Search...">
<a class='search-btn' href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="text-end">
Sign-up
Login
Logout
</div>
</div>
</div>
</header>
{% block body %}
{% endblock %}
</div>
<footer class="footer">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
</footer>
</body>
</html>
And this is my connect to css_files in main.py
css_file = 'static/css/main.css'
css_file_authorization = 'static/css/login_form.css'
css_file_reset_password_request_page = 'static/css/request_passsword.css'
But here is an example of a page that is generated after switching from email:
And here is the one that should have been generated, and is generated in the case of the second handler function
Maybe someone knows how to solve it
I'm wanting to render bootstrap carousel and other nested html elements. im newer to Jinja2 and didn't see anything on the internet talking about this particular issue.
here is my python
#app.route("/")
def index():
r = requests.get(os.environ['AWS_Product_URL'])
prods = list(json.loads(r.text))
return render_template("index.html", my_products=prods)
this works
{% for key in my_products %}
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
{% endfor %}
but this doesn't
{% for key in my_products %}
<div class="carousel-item">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
I took an existing template and trying to make this dynamic. the class exists. I'm confused why Jinja2 is having trouble with a nested item in html.
Why??
You're probably just missing to add class active to the carousel item
bootstrap carousel items requires at least one active element, all the others will be hidden.
so try out adding something like
{% for key in my_products %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
Just in case, here's template that I've tested with and it should be working fine assuming my_products is not empty.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner text-center">
{% for key in my_products %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
</div>
<button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleControls" 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 bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
So, I've been trying to create a user login. When I click submit on my login form, I get this error:
Exception Type: TypeError
Exception Value: 'function' object is not iterable
Here's the full Traceback: http://dpaste.com/3D1B7MG
So, If I'm reading the Traceback correctly, the problem is in the {% extends "base.html" %} line of all_poss.html. So would that would mean the problem is actually inside base.html? or in the view that controls all_posts?
My all_posts.html
{% extends "base.html" %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style></style>
<title></title>
</head>
<body>
</body>
</html>
base.html
{% load staticfiles %}
{% load crispy_forms_tags %}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<TITLE>{% block title %}{% endblock %}</TITLE>
</HEAD>
<BODY>
{% block content %}
<div class="navbar-wrapper">
<div class="post_button" style="width:58px; margin:0 auto;">
Submit a Post
</div> <!-- /.post_button-->
<div class="log_bar">
<ul>
{% if user.is_authenticated %}
<li>Welcome,</li>
<li>{{ user.username }}</li>
<li>|</li>
<li>Log Out</li>
{% else %}
<li>Please</li>
<li><a data-toggle="modal" data-target="#modal-login" href="">log in</a></li>
<li>or</li>
<li><a data-toggle="modal" data-target="#modal-register" href="">sign up</a></li>
{% endif %}
</ul>
</div><!-- /.log_bar -->
<nav class="navbar navbar-fixed-left navbar-static-top">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav ">
<li class="active">Home <span class="sr-only">(current)</span></li>
<li>All</li>
<li>New</li
<li class="dropdown">
Top<span class="caret"></span>
<ul class="dropdown-menu">
<li>hour</li>
<li>24 hrs</li>
<li>week</li>
<li>month</li>
<li>year</li>
<li>beginning of time</li>
<li role="separator" class="divider"></li>
<li>Custom Search</li>
</ul>
</li>
</ul>
</div><!-- /.container-fluid -->
</nav>
<div id="side_bar">
<form class="navbar-form navbar-static-top navbar-right" role="search" id="navBarSearchForm">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default" id="search_btn">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div><!-- /.side-bar -->
<button class="btn-block" id='hideshow' value='hide/show' style="display: block; height: 100%;"></button>
{% include 'register.html' %}
{% include 'login.html' %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="{{ STATIC_URL }} /static/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }} /static/jquery.leanModal.js"></script>
{% endblock %}
</BODY>
</HTML>
views.py
def login(request):
"""
Log in view
"""
if request.method == 'POST':
form = AuthenticationForm(data=request.POST)
if form.is_valid():
user = authenticate(username=request.POST['username'], password=request.POST['password'])
if user is not None:
if user.is_active:
django_login(request, user)
return render(request, 'all_posts.html', {'user': request.user})
else:
form = AuthenticationForm()
return render_to_response('login.html', {
'authenticationform': form,
}, context_instance=RequestContext(request))
def all_posts(request):
post_list = TextPost.objects.all().order_by('-score'))
paginator = Paginator(post_list, 100) # Show 100 contacts per page
registrationform = RegistrationForm(request.POST or None)
authenticationform = AuthenticationForm(request.POST or None)
page = request.GET.get('page')
try:
posts = paginator.page(page)
except PageNotAnInteger:
# If page is not an integer, deliver first page.
posts = paginator.page(1)
except EmptyPage:
# If page is out of range (e.g. 9999), deliver last page of results.
posts = paginator.page(paginator.num_pages)
return render(request, 'all_posts.html', {'posts': posts, 'registrationform': registrationform, 'authenticationform': authenticationform, 'user': request.user})
Edit 1: login.html login.html and register.html are identical modals, one with a login form and the other with the registration one.
{% load staticfiles %}
{% load crispy_forms_tags %}
<div class="modal" id="modal-login">
<div class="modal-dialog">
<div class="modal-content">
<form enctype="multipart/form-data" method="post" action="login/">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Log In</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{ authenticationform|crispy }}
</div>
<div class="modal-footer">
<input type='submit' class="btn btn-primary" value="Log In" />
</div>
</form>
</div>
</div>
</div>
Edit 2: register.html
{% load staticfiles %}
{% load crispy_forms_tags %}
<div class="modal" id="modal-register">
<div class="modal-dialog">
<div class="modal-content">
<form enctype="multipart/form-data" method="post" action="register/">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Register</h3>
</div>
<div class="modal-body">
{% csrf_token %}
{{ registrationform|crispy }}
</div>
<div class="modal-footer">
<input type='submit' class="btn btn-primary" value="Register" />
</div>
</form>
</div>
</div>
</div>
Alright, I was able to solve it.
The problem was apparently in my base.html where I had:
<li>{{ user.username }}</li>
and
<li>Log Out</li>
and I just changed the href="{% %}" tags to "profile/" and "logout/"
respectively.
I ran into this error while doing the Django tutorial.
The core problem was in my app's urls.py, in urlpatterns, with the second argument here:
path('', views.index, views.IndexView.as_view(), name='index'),
It should have been:
path('', views.IndexView.as_view(), name='index'),
Not sure how the extra views.index snuck in there but it was causing the problem. (as to why that exact error occurs - not going to dig too deep)
I believe this is preferable to deleting the {% url '...' id %} call and hard-coding its result as advised in the solution above.
I'm creating a website and it works fine when i use direct html. Now i want to use Jinja2 to render my template and there is something wrong. You can see that there is a blank space on top of my page here http://kgroupman.azurewebsites.net/ but it works fine with firefox. Inspect element do not point out that blank section and there is no padding or margin and there is nothing wrong with the source. Please help!
Here is the code:
base.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
{% block page_title %}{% endblock %}
</title>
<!--BASE CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="{{url_for('static', filename='css/base.css')}}" />
<!--ADDITIONAL CSS-->
{% block additional_css %}
{% endblock %}
<!--BASE SCRIPT-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--ADDITIONAL SCRIPT-->
{% block additional_script %}
{% endblock %}
</head>
<body>
<section class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img src="{{url_for('static', filename='imgs/4logo.png')}}" id="logo"></span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
</section>
<section class="body">
<div class="left-panel">
{% block body_left %}
{% endblock %}
</div>
<div class="right-panel">
{% block body_right %}
{% endblock %}
</div>
</section>
<section class="footer">
<span>#Ngo Tuan Khoa - 2016</span>
</section>
</body>
</html>
login.html
{% extends "base.html" %}
{% block page_title %}Đăng nhập | Quản lý nhóm{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}" />
{% endblock %}
{% block additional_script %}
<script src="../static/script/login.js"></script>
{% endblock %}
{% block body_left %}
<div class="login-form">
<p><img id="login-icon" src="{{url_for('static', filename='imgs/user.jpg')}}"></p>
<form action="" method="POST">
<p>Tên đăng nhập</p>
<p><input type="text" class="input-field" placeholder="Username"></p>
<p>Mật khẩu</p>
<p><input type="password" class="input-field" placeholder="Password"></p>
<p><input type="button" class="btn-login" value="Đăng nhập"></p>
</form>
</div>
{% endblock %}
{% block body_right %}
<img src="{{url_for('static', filename='imgs/wall.jpg')}}" height="100%" class="img-responsive">
{% endblock %}
It's a character at the top of your body
Solution found. Delete login.html and recreate it. There's must be an invisible character that i can't see somehow!
I'm getting problem with django templates.
my problem come because when I display my website in my browser django put all the content of my head tag into my body tag.
This is my base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SecureKids {% block title %}{{title}}{% endblock %}</title>
</head>
<body>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">{% block apartado %} {% endblock %}</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<p class="text-success">{% block msg %}{% endblock %}</p>
<div class="row">
{% block contenido %}---{% endblock %}
</div><!-- /.row -->
</div><!-- /#page-wrapper -->
</body>
</html>
and here's a template that extends from base.html
{% extends "base.html" %}
{%load i18n%}
{% block apartado %}
{% trans 'Control Panel' %} <small>{% trans 'Device' %} {{device.name}}</small>
{% endblock %}
{% block contenido %}
<h2>{% trans 'WELLCOME' %}</h2>
<div>
<h3>{% trans 'Child:' %} <small>{{device.child.name}}</small></h3>
<h3>{% trans 'Father's device:' %} <small>{{device.name}}</small></h3>
</div>
{% endblock %}
And this is the result in my browser
<html lang="en">
<head>
</head>
<body>
"
"
<meta charset="utf-8">
<title>SecureKids </title>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Control Panel <small>Device</small>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<p class="text-success"></p>
<div class="row">
<h2>WELLCOME</h2>
<div>
<h3>Child: <small>m</small></h3>
<h3>Father's device: <small>m disp</small></h3>
</div>
</div><!-- /.row -->
</div><!-- /#page-wrapper -->
</body>
</html>
function in views.py for this example
#login_required
def panel(request,oid):
device = get_object_or_404(Device,pk=oid,child__father=request.user.id)
messages.add_message(request, messages.INFO,"Este dispositivo no existe")
return HttpResponseRedirect('/')
request.session["device"] = device.id
request.session["devicen"] = device.name
request.session["childn"] = device.child.name
return render_to_response('children/panel.html',{'device':device},context_instance=RequestContext(request))
As you can see in my browser all the content is into body tag, and django also include 3 empty lines just after body tag
I hope somebody can help me
Thanks