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>
Related
I have created an application and everything seems to be working perfectly apart from this one page that I created. The contents are there, however, the styling of the page is not being applied. It actually seems as if the contents of the page I have created is overriding the layout styles.
The layout.html template has worked for every other webpage, and I am so confused it doesn't seem to work for this page.
To give context, this page involves filtering posts by company.
My HTML template is:
<!DOCTYPE html> {% extends "layout.html" %} {% block content %} {% for post in posts.items %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="{{ url_for('company_posts', company=post.company) }}">{{ post.company }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.job_title }}</a></h2>
<p class="article-content">{{ post.sector }}</p>
<p class="article-content">{{ post.location }}</p>
<p class="article-content">{{ post.employment_type }}</p>
More Info
</div>
</article>
{% endfor %} {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %} {% if page_num %} {% if posts.page == page_num %}
<a class="btn btn-info mb-4" href="{{ url_for('jobs', page=page_num)}}">{{ page_num }}</a> {% else %}
<a class="btn btn-outline-info mb-4" href="{{ url_for('jobs', page=page_num)}}">{{ page_num }}</a> {% endif %} {% else %} ... {% endif %} {% endfor %} {% endblock content %}
My route is:
#app.route("/company/<string:company>")
def company_posts(company): #show all company job posts from specific company
page = request.args.get('page', 1, type=int)
posts = Job_Requirements.query.filter_by(company=company).order_by(Job_Requirements.id.desc()).paginate(per_page=4)
return render_template('company_posts.html', posts=posts)
This is my layout.html template
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> {% if title %}
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='main.css')}}">
<title>{{ title }} | CVLink</title>
{% else %}
<title>CVLink</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">CVLink</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('jobs') }}">Jobs</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav ms-auto">
{% if current_user.is_authenticated %}
<!--<a class="nav-item nav-link" href="{{ url_for('employer_account') }}">Employer Account</a>-->
<a class="nav-item nav-link" href="{{ url_for('employer_account') }}">Post A Job</a>
<a class="nav-item nav-link" href="{{ url_for('account') }}">Profile</a>
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a> {% else %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a> {% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message}}
</div>
{% endfor%} {% endif %} {% endwith %} {% block content %}{% endblock %}
</div>
<!--<div class="col-md-4">
<div class="content-section">
<h3>Noticeboard</h3>
<p class="text-muted">More Information</p>
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Job Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</div>
</div>-->
</div>
</main>
<!-- Optional JavaScript -->
<!-- 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>
Any help will be much appreciated.
Did you tried remove <!DOCTYPE html> from your template?
According to the documentation here should escape...
This question already has answers here:
Flask view return error "View function did not return a response"
(3 answers)
Closed 1 year ago.
I hope you can help me, because I can't find an solution on google.
Sense:
If you have logged in, you can switch to the settings otherwise not.
This is my code:
{% if settings is true %}
<a href="{{ url_for('main.settings') }}" class="navbar-item">
Settings
</a>
{% endif %}
This is the Full Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<section class="hero is-fullheight" style="background-color:#C4FCEF;">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a href="{{ url_for('main.index') }}" class="navbar-item">
Home
</a>
{% if current_user.is_authenticated %}
<a href="{{ url_for('main.profile') }}" class="navbar-item">
Profile
</a>
{% endif %}
{% if settings == true %}
<a href="{{ url_for('main.settings') }}" class="navbar-item">
Settings
</a>
{% endif %}
{% if not current_user.is_authenticated %}
<a href="{{ url_for('auth.login') }}" class="navbar-item">
Login
</a>
<a href="{{ url_for('auth.signup') }}" class="navbar-item">
Sign Up
</a>
{% endif %}
{% if current_user.is_authenticated %}
<a href="{{ url_for('auth.logout') }}" class="navbar-item">
Logout
</a>
{% endif %}
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
{% block content %}{% endblock %}
</div>
</div>
</section>
</body>
</html>
This is the Error:
TypeError:
The view function did not return a valid response.
The function either returned None or ended without a return statement.
Try changing {% if settings is true %} to {% if settings %} or {% if settings == true %} or {% if settings is sameas true %}
Refer here
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>
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!