I am using Django 3.2
This is my base template (snippet):
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content={% block page_description %}""{% endblock page_description %}>
<meta name="keywords" content={% block page_keywords %}""{% endblock page_keywords %}>
<link rel='icon' href='{% static "img/favicon.ico" %}' type='image/x-icon'/ >
<title>{% block page_title %}Demo{% endblock page_title %}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C500%2C600%2C700%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik">
<link rel="stylesheet" href="{% static 'css/footer.css' %}">
<link rel="stylesheet" href="{% static 'css/header.css' %}">
{% block head_styles %}
{% endblock head_styles %}
{% block head_js %}
{% endblock head_js %}
</head>
<body>
{% block header %}
{% include "partials/header.html" %}
{% endblock header %}
{% block messages %}
{% include 'partials/messages.html' %}
{% endblock messages %}
<!-- Page Content -->
<div class="d-flex flex-column sticky-footer-wrapper">
{% block content %}
{% endblock content %}
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
{% block footer %}
{% include 'partials/footer.html' %}
{% endblock footer %}
{% block body_js %}
{% endblock body_js %}
<script>
$().ready(function() {
});
</script>
</body>
</html>
/path/to/header.html
{% load static %}
<!-- Header -->
<header id="js-header" class="u-header u-header--static">
<!-- ... # snipped -->
<form action="/action_page.php" method="GET">
<button id="btn-submit-item" type="submit" class="btn" style="margin-right: 10px;border: 1px solid #CACACA;">Submit</button>
</form>
{% if not user.is_authenticated %}
<a class="btn btn-success btn" href="#" role="button">Sign In</a>
{% else %}
<a class="nav-link text-dark" href="#">{{ user.username }}</a>
{% endif %}
</ul>
</div>
<!-- End Navigation -->
</div>
</nav>
</div>
</header>
<!-- End Header -->
{% block body_js %}
<script>
$().ready(function(){
$( "#btn-submit-item" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
{% endblock body_js %}
In rendered page HTML, I get something like this:
# ...
<!-- End Header -->
<script>
$().ready(function(){
$( "#btn-submit-photo" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
# ...
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
The placement is in the wrong place - so the JQuery operator $ is attempting to be used - BEFORE the JQuery library is loaded - hence the error.
My question is - why is Django rendering the block in the wrong place - and how do I fix this error?
You're rendering header.html in {% block header %} which is added before the jquery script. Therefore, $ is undefined.
Solution 1:
Move the jquery include to the <head></head> of your html, like you did with the bootstrap.min.css file.
Solution 2:
If you want to have your jquery loaded just before the body closing tag (</body>), you should move your inline jquery to a .js file and include that after including jQuery. For example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"
integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
crossorigin="anonymous"></script>
<script src="your_script.js"></script>
</body>
Read more about django and static files here: https://docs.djangoproject.com/en/3.2/howto/static-files/
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>
The '/' route is returning 'Hello world'. However, the '/data' route will not return anything. I can't figure out why it won't render anything in the browser.
from flask import Flask, render_template
import requests
import logging
from flask_sqlalchemy import SQLAlchemy
from localStoragePy import localStoragePy
app = Flask(__name__)
app.config.from_object('config')
db = SQLAlchemy(app)
token = 'Czm5aFtxepvvE4jZddlOsKXiwOzJUfl1BiFW18BfUtsUPPTkZnA663WQ13oQMdEq'
BASE_URL = 'https://canvas.sfu.ca/api/v1/courses/62319/quizzes'
headers = {'Authorization': "Bearer Czm5aFtxepvvE4jZddlOsKXiwOzJUfl1BiFW18BfUtsUPPTkZnA663WQ13oQMdEq".format(token)}
auth_response = requests.get(BASE_URL, headers=headers)
#userStringFromLocalStorage = localStoragePy.getItem('auth_response')
#userFromLocalStorage = JSON.parse(userStringFromLocalStorage)
#print(userStringFromLocalStorage)
print(auth_response.json())
#logging.warning('this is a warning')
#app.route('/')
def hello_world():
return 'Hello world';
#app.route('/data')
def hello_world_cello():
data = [{
"id":164284,
"title":"Quiz 1",
"html_url":"https://canvas.sfu.ca/courses/62319/quizzes/164284",
"mobile_url":"https://canvas.sfu.ca/courses/62319/quizzes/164284?force_user=1&persist_headless=1",
"description":"",
"quiz_type":"assignment",
"time_limit":"None",
"timer_autosubmit_disabled":false,
"shuffle_answers":false,
"show_correct_answers":true,
"scoring_policy":"keep_highest",
"allowed_attempts":1,
"one_question_at_a_time":false,
"question_count":2,
"points_possible":2.0,
"cant_go_back":false,
"access_code":"None",
"ip_filter":"None",
"due_at":"None",
"lock_at":"None",
"unlock_at":"None",
"published":true,
"unpublishable":true,
"locked_for_user":true,
"lock_info":{
"missing_permission":"participate_as_student",
"asset_string":"quizzes:quiz_164284"
},
"lock_explanation":"This quiz is currently locked.",
"hide_results":"None",
"show_correct_answers_at":"None",
"hide_correct_answers_at":"None",
"all_dates":[
{
"id":53086,
"due_at":"2021-05-06T06:59:59Z",
"unlock_at":"None",
"lock_at":"None",
"title":"Entrepreneursity Test",
"set_type":"CourseSection",
"set_id":131870
}
],
"can_unpublish":true,
"can_update":true,
"require_lockdown_browser":false,
"require_lockdown_browser_for_results":false,
"require_lockdown_browser_monitor":false,
"lockdown_browser_monitor_data":"None",
"speed_grader_url":"https://canvas.sfu.ca/courses/62319/gradebook/speed_grader?assignment_id=630900",
"permissions":{
"manage":true,
"read":true,
"update":true,
"create":true,
"submit":true,
"preview":true,
"delete":true,
"read_statistics":true,
"grade":true,
"review_grades":true,
"view_answer_audits":false
},
"quiz_reports_url":"https://canvas.sfu.ca/api/v1/courses/62319/quizzes/164284/reports",
"quiz_statistics_url":"https://canvas.sfu.ca/api/v1/courses/62319/quizzes/164284/statistics",
"message_students_url":"https://canvas.sfu.ca/api/v1/courses/62319/quizzes/164284/submission_users/message",
"section_count":1,
"quiz_submission_versions_html_url":"https://canvas.sfu.ca/courses/62319/quizzes/164284/submission_versions",
"assignment_id":630900,
"one_time_results":false,
"only_visible_to_overrides":true,
"assignment_group_id":154901,
"show_correct_answers_last_attempt":false,
"version_number":3,
"has_access_code":false,
"post_to_sis":false,
"migration_id":"None"
}]
return render_template('pages/venues.html', areas=data);
venues.html looks like the following
{% extends 'layouts/main.html' %}
{% block title %}Fyyur | Venues{% endblock %}
{% block content %}
{% for area in areas %}
<h3>{{ area.id }}, {{ area.title }}</h3>
<ul class="items">
</ul>
{% endfor %}
{% endblock %}
main.html
<!doctype html>
<head>
<meta charset="utf-8">
<title>{% block title %}{% endblock %}</title>
<!-- meta -->
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- /meta -->
<!-- styles -->
<link type="text/css" rel="stylesheet" href="/static/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="/static/css/layout.main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.responsive.css" />
<link type="text/css" rel="stylesheet" href="/static/css/main.quickfix.css" />
<!-- /styles -->
<!-- favicons -->
<link rel="shortcut icon" href="/static/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/static/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/static/ico/favicon.png">
<!-- /favicons -->
<!-- scripts -->
<script src="https://kit.fontawesome.com/af77674fe5.js"></script>
<script src="/static/js/libs/modernizr-2.8.2.min.js"></script>
<script src="/static/js/libs/moment.min.js"></script>
<script type="text/javascript" src="/static/js/script.js" defer></script>
<!--[if lt IE 9]><script src="/static/js/libs/respond-1.4.2.min.js"></script><![endif]-->
<!-- /scripts -->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">🔥</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>
{% if (request.endpoint == 'venues') or
(request.endpoint == 'search_venues') or
(request.endpoint == 'show_venue') %}
<form class="search" method="post" action="/venues/search">
<input class="form-control"
type="search"
name="search_term"
placeholder="Find a venue"
aria-label="Search">
</form>
{% endif %}
{% if (request.endpoint == 'artists') or
(request.endpoint == 'search_artists') or
(request.endpoint == 'show_artist') %}
<form class="search" method="post" action="/artists/search">
<input class="form-control"
type="search"
name="search_term"
placeholder="Find an artist"
aria-label="Search">
</form>
{% endif %}
</li>
</ul>
<ul class="nav navbar-nav">
<li {% if request.endpoint == 'venues' %} class="active" {% endif %}>Venues</li>
<li {% if request.endpoint == 'artists' %} class="active" {% endif %}>Artists</li>
<li {% if request.endpoint == 'shows' %} class="active" {% endif %}>Shows</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<!-- Begin page content -->
<main id="content" role="main" class="container">
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-block alert-info fade in">
<a class="close" data-dismiss="alert">×</a>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</main>
</div>
<div id="footer">
<div class="container">
<p>Fyyur © All Rights Reserved.</p>
{% block footer %}{% endblock %}
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script type="text/javascript" src="/static/js/libs/jquery-1.11.1.min.js"><\/script>')</script>
<script type="text/javascript" src="/static/js/libs/bootstrap-3.1.1.min.js" defer></script>
<script type="text/javascript" src="/static/js/plugins.js" defer></script>
</body>
</html>
I am trying to return 'data' variable in the '/data' route. I am using Flask as my environment. I haven't created a database yet to store these.
Ok, i'm now home, i'll thanks for editing with the main.html
So, your error probably come from here
<li {% if request.endpoint == 'venues' %} class="active" {% endif %}>Venues</li>
<li {% if request.endpoint == 'artists' %} class="active" {% endif %}>Artists</li>
<li {% if request.endpoint == 'shows' %} class="active" {% endif %}>Shows</li>
You're asking flask to generate a url for venues, artist, and shows.
The problem is that you never define these routes, flask can't create a URL for something that doesn't exist.
You have two solution :
You define your href with a relative url : href="/artists" for example, this will lead to http(s)://{host}/artists
This is the good old html way, and it's working easily.
You can define temporary void routes for these, for example :
#app.route('/artists')
def artists():
return ''
This will return a blank page.
With that and the previous comments i leaved, you should be able to make that working.
You should have error on your Flask app, check it out if you can, even if the error code doesn't help you, it can help other people to understand what's wrong.
Tell me if that helped.
When I use {% extends 'base.html' %} my navbar displays correctly but when I use {% block content %} Hello World{% endblock content %} my navbar disappears and I only see the text "Hello World". I dont really know what to try it appeared to be straight forward but apparently it isn't until you actually know.
{% extends "base.html" %}
{% block content %}<h1>Hello World</h1>{% endblock content %}
My 'base.html' file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% endblock %}
</body>
Change your base.html to the one below. What is happening is you are overwriting your content block with whats in your template ("Hello world"). If you want to stick with this, in your child template, put {{block.super}} after {% block content %}, but the "correct" way would be to change your base.html with the one below.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% block content %}
{% endblock %}
</body>
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