when i run the below code i have this error:
jinja2.exceptions.TemplateSyntaxError: unexpected '%'
please note that i copied this code from you-tuber which working with him properly
i review my code and checked the syntax but i did not find any error so please any one can help
this is the python file:
from flask import Flask, render_template, url_for
app = Flask(__name__)
posts = [
{
'author': 'Corey Schafer',
'title': 'Blog Post 1',
'content': 'First post content',
'date_posted': 'April 20, 2018'
},
{
'author': 'Jane Doe',
'title': 'Blog Post 2',
'content': 'Second post content',
'date_posted': 'April 21, 2018'
}
]
#app.route("/")
#app.route("/home")
def home():
return render_template('home.html', posts=posts)
#app.route("/about")
def about():
return render_template('about.html', title='About')
if __name__ == '__main__':
app.run(debug=True)
and this is the html files:
home.html:
{% extends "layout.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content %}
about.html:
{% extends "layout.html" %}
{% block content %}
<h1>About Page</h1>
{% endblock content %}
layout.html:
<!DOCTYPE html>
<html>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
{% if title %}
<title>Flask Blog - {{ title }}</title>
{% else %}
<title>Flask Blog</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="/">Flask Blog</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="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest 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>
</p>
</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>
as far as I know, template inheritance goes something like this
{% block content %}
your content
{% endblock %}
maybe you are ending the blocks wrong like {% endblock content %}
look here for more explanation
Related
Here is my html code
Base.html
<title> {% block title %}{% endblock %} </title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/content">Home</a>
<a class="dropdown-item" href="#">Calendar</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Still in progress...</a>
</li>
</ul>
</form>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
and then this is my jquery code:
index.html
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Datepicker</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">Schedule an Appointment</div>
<div class="panel-body">
<form action="/ok" method="post">
<div class="row">
<div class='col-md-6'>
<div class="form-group">
<label class="control-label">Appointment Time</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" name="Time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
</div>
</div>
</div>
</body>
I have tried many times to modify the index.html to be able to extent by the base.html but failed.
Neither only the background color change nor the jquery cannot be load in the chrome, as a result no datetimepicker is appear.
How can I use the {% extends "base.html" %} (jinja2 method) to extend the base.html to index.html?
Thanks very much
First of all you have to define
{% block content %}{% endblock %}
in base.html and then in the index.html.
{% extends "base.html" %} // at top of file
All the content should be between
{% block content %}{% endblock %} in index.html. you can see in documentation
base.html
<html> ...
your_main_html.html
{% extends "base.html" %}
{% block extrahead %}
<style>
<!-- your css codes -->
</style>
{% endblock %}
{% block content %}
<!-- your html and jinja codes -->
{% endblock %}
{% block extrajs %}
<script>
<!-- your js codes -->
</script>
{% endblock %}
you will need to download jQuery js file from https://jquery.com/download/ and use it in your index file inside head tag as
<script src="jquery-3.6.1.min.js"></script>
or
use jQuery CDN as below
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
I'm having trouble displaying my content with Django in my ecommerce app. This is the base url with only the navigation bar:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style_store.css' %}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Inicio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Mi ecommerce</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<form class="form-inline my-4">
<input class="form-control mr-sm-2" type="search" placeholder="Buscá productos" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</ul>
<ul class="navbar-nav">
{% 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">
{{ user }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Mi perfil</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Ventas</a>
<a class="dropdown-item" href="#">Compras</a>
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Logueate</a>
</li>
{% endif %}
</ul>
</div>
</nav>
{% block content %}
{% endblock content %}
<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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
As you can see, I have the {% block content %} tag so I can extend this website with the homepage. This is home.html:
{% extends 'store/store.html' %}
<h1>HelloWorld</h1>
The issue is that I cannot see "HelloWorld", only the navigation bar from the base html. Any help will be appreciated!
You need to put your content in a block that is defined in the template you are extending for it to render. In this case the content block
{% extends 'store/store.html' %}
{% block content %}
<h1>HelloWorld</h1>
{% endblock content %}
The blocks in the "parent" template define the sections where you can insert content in an extending template, you need to use {% block %} in the extending template to tell the renderer which section you are placing content into. Anything outside of a {% block %} will not be rendered
When I open http://127.0.0.1:8000/ which is home.html, I am getting:
NoReverseMatch at / and Reverse for 'exam-detail' with arguments '('',)' not found. 1 pattern(s) tried: ['exam/(?P[^/]+)$']
I think the error is due to <str:pk> in urls.py.
The urls.py file is below:
from . import views
from .views import ExamListView, ExamDetailView
app_name='map'
urlpatterns = [
path("", ExamListView.as_view(), name='map-home'),
path("exam/<str:pk>", ExamDetailView.as_view(), name="exam-detail"),
path("login_student/", views.login_student, name='map-login'),
path("register_student", views.register_student, name='map-register'),
path('add_student/', views.add_student, name='add_student'),
path('front/', views.front, name="front"),
]
models.py:
subject = models.TextField(primary_key = True, unique = True)
def __str__(self):
return self.subject
home.html
{% extends "map/base.html" %}
{% block content %}
<p>WELCOME HOME</p>
{% for exam in exams %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'map:exam-detail' exam.subject %}">{{ exam }} </a>
</div>
</div>
</article>
{% endfor %}
{% endblock content %}
base.html
{% load static %}
<!DOCTYPE html>
<html>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'map/main.css' %}">
{% if title %}
<title>{{ title }}</title>
{% else %}
<title> MAP PAGE </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="/">Project M.A.P</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 'map:map-home' %}">Home</a> <!-- no hardcoded links -->
<a class="nav-item nav-link" href="{% url 'map:map-home' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
<a class="nav-item nav-link" href="{% url 'map:map-register' %}">Student</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest 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>
</p>
</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>[enter image description here][1]
views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.http import HttpResponseRedirect
from django.urls import reverse
from . models import Student, Exam
from django.views.generic import ListView, DetailView
def home(request):
context = {
'exams': Exam.objects.all()
}
return render(request, 'map/home.html', context)
class ExamListView(ListView): #class based views
model = Exam
template_name = 'map/home.html' #<app>/<model>_<viewtype>.html
context_object_name = 'exams'
ordering = ['subject'] #['-exam']
class ExamDetailView(DetailView):
model = Exam
You missed exam.pk in the home.html
Update your code in this manner,
<div class="article-metadata">
<a class="mr-2" href="{% url 'map:exam-detail'
exam.pk %}">{{ exam }} </a>
</div>
</div>
In
python manage.py shell
from my_app_name.models import Exam
exam = Exam()
exam.subject = ""
exam.save()
I have executed these lines. and I also created exams for subject like "google", "english",..
Now Exam.objects.all() returns
<QuerySet [<Exam: google>, <Exam: english>, <Exam: >]>
The problem is due to having a string of length zero as subject for one of the exam object. Now I deleted that exam using Exam.objects.get(subject="").delete(). Problem solved.
{% url 'map:exam-detail' exam.subject %}
or
{% url 'map:exam-detail' exam %}
or
{% url 'map:exam-detail' exam.pk %}
all these are working now because all are returning the subject. But {% url 'map:exam-detail' exam.id %} won't work. Because I have made subject as primary_key in the Exam model, so Exam model don't have an attribute id(which is added by default when no primary_key is mentioned).
thinking about why it has accepted the empty string as a subject, though I have defined it as primary_key.
Then I wanna read about django.db.models.TextField and just keyed help(TextField) and got
TextField(verbose_name=None, name=None, primary_key=False, max_length=None, unique=False, blank=False, null=False, db_index=False, rel=None, default=<class 'django.db.models.fields.NOT_PROVIDED'>, editable=True, serialize=True, unique_for_date=None, unique_for_month=None, unique_for_year=None, choices=None, help_text='', db_column=None, db_tablespace=None, auto_created=False, validators=(), error_messages=None)
Now tried validators...
The follow up problem link
Thank you all
Mounika
Hi I would like to change the size of my form post box (where the placeholder sits), its quite long. I was wondering how I would change it with my code below:
forms.py
from django import forms
from home.models import Post
class HomeForm(forms.ModelForm):
post = forms.CharField(widget=forms.TextInput(
attrs={
'class': 'form-control',
'placeholder': 'How are you feeling?',
}
))
class Meta:
model = Post
fields = ('post',)
home.html:
{% extends 'base.html' %}
{% block body%}
<div class="container">
<br/>
<form method="post">
{% csrf_token %}
{{ form.post }}
<br />
<button type="submit">Submit</button>
</form>
<h2>{{ text }}</h2>
{% for post in posts %}
<h1>{{ post.post }}</h1>
<p>Posted </b> on {{ post.created }}</p>
{% endfor %}
</div>
{% endblock %}
base.html:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head %}
<title>anonmy</title>
{% endblock %}
</head>
<body>
<br>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
{% if user.is_authenticated %}
<ul class="nav navbar-nav">
<li><b>anonmy</b></li>
<li><a href='{% url 'home:categories' %}'>categories</a></li>
<li>profile</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>log out</li>
</ul>
{% else %}
<ul class="nav navbar-nav">
<li>anonmy</li>
<li>login</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>forgotten password?</li>
<li>register</li>
</ul>
{% endif %}
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div>
{% block body %}
<h1>Base</h1>
{% endblock %}
</body>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I know how to change a standard html form, but with ginger two templating/django im unsure.Would I have to add a css file to my project then edit it or do something in forms.py?
Thank you
you just edit it like a standard html file by adding a css file and use the class name you entred in the form attrs
Add this under your model form class
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields['post'].widget.attrs.update({'size': '20'})
More about this here: Widgets
Application - Flask app hosted on google app engine.
I get the following error when I try rendering my template
File "Show_Messages.html", line 1, in top-level template code
{% extends "AdminMaster.html" %}
TypeError: 'Key' object is not iterable
My template (Show_messages.html)
{% extends "AdminMaster.html" %}
{% block title %}News{% endblock %}
{% block page %}News{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>News</h1>
</div>
<div class="col-lg-12">
<ul class="list-group">
{% for newsitem in newsitems %}
<li class="list-group-item">
<span class="badge">
<a href="Edit-NewsItem?ID={{ newsitem.key.urlsafe() }}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</a>
</span>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
The route function
#message_admin_routes.route('/xxxx/xxxx-xxxx')
#authenticate_admin
def show_messages():
breadcrumb, user = build_user_and_breadcrumbs()
messages = MessageFactory().get_messages_key()
return render_template('Show_Messages.html',
user=user,
breadcrumb=breadcrumb,
newsitems=messages)
------Edited---------
AdminMaster.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<!--googleoff: snippet-->
{% block head %}
<title>CFC Melbourne - {% block title %}{%endblock%}</title>
<meta name="Section" content="{% block page %}{%endblock%}">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://storage.googleapis.com/xxxx/xxx/xxx.css" type="text/css">
<link rel="stylesheet" href="https://storage.googleapis.com/xxxx/xxxx/xxxx.css" type="text/css">
<link rel="shortcut icon" href="https://storage.googleapis.com/xxxx/xxxx/favicon.ico">
<link href='https://storage.googleapis.com/xxx/xxx.css' rel='stylesheet' type='text/css'>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
{% endblock %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
/**
* Function that tracks a click on an outbound link in Google Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label.
*/
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
function () {
document.location = url;
}
});
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'xxx-xx-xx', 'xxx-xx-xx.xxx.xxx');
ga('send', 'pageview');
</script>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div id="wrap">
<div id="menu">
<nav class="navbar navbar-default" style="margin-bottom: 0px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/Eden"><div class='logo-text-a' style="color: black">CFC Melbourne Admin</div></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Applications <span class="caret"></span>
<ul class="dropdown-menu">
<li>List all applications</li>
<li>Create new application</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Vision</li>
<li role="separator" class="divider"></li>
<li>One more separated linkkk</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
{{ user.nickname() }}<span class="caret"></span>
<ul class="dropdown-menu">
<li>Permissions</li>
<li>User Information</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
{% include 'AdminBreadcrumb.html' %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
<!--googleoff: snippet-->
{% block footer %}
<script src="https://storage.googleapis.com/xxxx/js/jquery-2.1.0.min.js"></script>
<script src="https://storage.googleapis.com/xxxx/js/bootstrap.min.js"></script>
<script>
// Remove active for all items.
$('.page-sidebar-menu li').removeClass('active');
// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active');
</script>
{% endblock%}
</body>
</html>
In your template code you have a for loop, which is expecting a iterable object like list. but some of your items passed here is non iterable.
you need to check the item is iterable before looping. An example given below;
<ul class="sitemap">
{%- for item in sitemap recursive %}
<li>{{ item.title }}
{%- if item.children -%}
<ul class="submenu">{{ loop(item.children) }}</ul>
{%- endif %}</li>
{%- endfor %}
</ul>
More details can be found here: https://stackoverflow.com/a/21006895/2336603