TimothyAURA
Reputation: 1359
Jinja template breaks when rendering entity property
I have a View Consult page being created by two Jinja2 templates (view-consult.html extends the base.html template).
The View Consult page has a table as follows
<table class="table">
<tbody>
<tr>
<th scope="row" class="col-consult-left">Patient Name</th>
<td class="col-consult-right"></td>
</tr>
<tr>
<th scope="row">Session Date</th>
<td>03-06-2017</td>
</tr>
<tr>
<th scope="row">Session Time</th>
<td>09:30 am</td>
</tr>
<tr>
<th scope="row">Status</th>
<td>Pending</td>
</tr>
<tr>
<th scope="row">Patient Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th scope="row">Patient Phone</th>
<td>0412 345 678</td>
</tr>
</tbody>
</table>
I pass a key to this page via the url:
http://localhost:8080/consults/view-consult?key=aghkZXZ-Tm9uZXIVCxIIQ29uc3VsdHMYgICAgIDIkwoM#consult-tab3
My handler for this page is:
class ViewConsultPage(webapp2.RequestHandler):
def get(self):
self.request.get('key', None)
consult = ndb.Key(urlsafe=self.request.get('key')).get()
template = JINJA_ENVIRONMENT.get_template('/templates/view-consult.html')
self.response.out.write(template.render())
This is OK, but when I want to start replacing the hard-coded consult properties in the html view with ndb entity properties, such as placing the patient name in the table, ie:
<table class="table">
<tbody>
<tr>
<th scope="row" class="col-consult-left">Patient Name</th>
<td class="col-consult-right"></td>
</tr>
<tr>
<th scope="row">Session Date</th>
<td>03-06-2017</td>
</tr>
<tr>
<th scope="row">Session Time</th>
<td>09:30 am</td>
</tr>
<tr>
<th scope="row">Status</th>
<td>Pending</td>
</tr>
<tr>
<th scope="row">Patient Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th scope="row">Patient Phone</th>
<td>0412 345 678</td>
</tr>
</tbody>
</table>
I got the following error:
Traceback (most recent call last):
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\webapp2-2.5.2\webapp2.py", line 1535, in __call__
rv = self.handle_exception(request, response, e)
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\webapp2-2.5.2\webapp2.py", line 1529, in __call__
rv = self.router.dispatch(request, response)
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\webapp2-2.5.2\webapp2.py", line 1278, in default_dispatcher
return route.handler_adapter(request, response)
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\webapp2-2.5.2\webapp2.py", line 1102, in __call__
return handler.dispatch()
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\webapp2-2.5.2\webapp2.py", line 572, in dispatch
return self.handle_exception(e, self.app.debug)
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\webapp2-2.5.2\webapp2.py", line 570, in dispatch
return method(*args, **kwargs)
File "C:\dev\projects\jw-connect\main.py", line 89, in get
self.response.out.write(template.render())
File "C:\dev\google-cloud-sdk\platform\google_appengine\lib\jinja2-2.6\jinja2\environment.py", line 894, in render
return self.environment.handle_exception(exc_info, True)
File "C:\dev\projects\jw-connect\templates\view-consult.html", line 1, in top-level template code
{% extends "/templates/base.html" %}
UndefinedError: 'consult' is undefined
I thought I defined consult in the RequestHandler? does consult somehow need to be passed to the template file?
Extra Info
Template base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/images/favicon.ico">
<title>JoggersWorld Connect</title>
<!-- Bootstrap core and custom CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
{% endblock head %}
</head>
<body>
<!-- App Header -->
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-brand"><img src="/images/jwconnect-logo.png"></div>
</div>
<div class="col-md-6">
<div class="logged-in-user">
<div class="row">
<div class="col-md-4">
<img src="/images/sportsmed-logo.png">
</div>
<div class="col-md-8">
<div class="logged-in-user-info">
<i class="fa fa-user" aria-hidden="true"></i><strong> Dr Christian Smith</strong>
<br>Sportsmed | Stepney
<br><a href="#">(Log Out)</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- App Content -->
{% block content %}
<div class="main-panel-home">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron"></div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card card-welcome">
<div class="card-block ">
<h3 class="card-title">Let's Get Started</h3>
<p class="card-text" style="font-size:21px; color:#555;">Connect with JoggersWorld - Find your perfect fit</p>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3">
<a role="button" class="btn btn-primary btn-lg btn-block" href="/schedule">Schedule</a>
</div>
<div class="col-md-3">
<a role="button" class="btn btn-primary btn-lg btn-block" href="/consults">Consults</a>
</div>
<div class="col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
<!-- Bootstrap core JavaScript ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Template view-consult.html
{% extends "/templates/base.html" %}
{% block content %}
<!-- Content - Navbar -->
<nav class="navbar">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Consults /<small class="text-muted"> John Smith 03-06-17 09:30</small></h2>
</div>
<div class="col-md-6">
<div class="input-group" id="adv-search">
<input type="text" class="form-control" placeholder="Search consults" />
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<div class="btn-group">
<button type="button" class="btn btn-success btn-filter btn-sm" data-target="completed">Completed</button>
<button type="button" class="btn btn-warning btn-filter btn-sm" data-target="pending">Pending</button>
<button type="button" class="btn btn-danger btn-filter btn-sm" data-target="cancelled">Canceled</button>
<button type="button" class="btn btn-default btn-filter btn-sm" data-target="all">All</button>
</div>
</div>
</div>
<button type="button" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- Content - Main -->
<div class="main-panel-consults">
<div class="container">
<div class="row">
<div class="col-md-2">
<!-- Side Nav -->
<a role="button" class="btn btn-secondary btn-lg" href="/consults"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
<a role="button" class="btn btn-secondary btn-lg" href="/"><i class="fa fa-home" aria-hidden="true"></i></a>
</div>
<div class="col-md-10">
<!-- Consult Session View -->
<ul class="nav nav-pills nav-justified nav-consult">
<li class="nav-item">
<a data-toggle="tab" class="nav-link nav-link-consult active" href="#consult-tab1">Consult Details</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link nav-link-consult" href="#consult-tab2">Clinical Information</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link nav-link-consult" href="#consult-tab3">Recommendations</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link nav-link-consult" href="#">Edit Consult</a>
</li>
</ul>
<div class="tab-content">
<div id="consult-tab1" class="tab-pane fade show active">
<div class="card">
<div class="card-block">
<div class="consult-card-head"><h4>Consult Details</h4></div>
<table class="table">
<tbody>
<tr>
<th scope="row" class="col-consult-left">Patient Name</th>
<td class="col-consult-right">{{ consult.patient_first }}</td>
</tr>
<tr>
<th scope="row">Session Date</th>
<td>03-06-2017</td>
</tr>
<tr>
<th scope="row">Session Time</th>
<td>09:30 am</td>
</tr>
<tr>
<th scope="row">Status</th>
<td>Pending</td>
</tr>
<tr>
<th scope="row">Patient Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th scope="row">Patient Phone</th>
<td>0412 345 678</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="consult-tab2" class="tab-pane fade">
<div class="card">
<div class="card-block">
<div class="consult-card-head"><h4>Clinical Information</h4></div>
<table class="table">
<tbody>
<tr>
<td class="col-consult-left">Orthodics</td>
<td class="col-consult-right">Yes</td>
</tr>
<tr>
<td class="col-consult-left">Foot Type</td>
<td class="col-consult-right">Over Pronated</td>
</tr>
<tr>
<td class="col-consult-left">Foot Measurement</td>
<td class="col-consult-right">11</td>
</tr>
<tr>
<td class="col-consult-left">Injury History</td>
<td class="col-consult-right">Plantar fasciitis on the left heel. Present for 3 months.</td>
</tr>
<tr>
<td class="col-consult-left">Activities</td>
<td class="col-consult-right">Weekly - Basketball training x 2<br>Daily - Jogging on beach
</td>
</tr>
<tr>
<td class="col-consult-left">Provider Recommendation</td>
<td class="col-consult-right">Client needing stable neutral shoe. Has high arch and may potentially need orthotics</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="consult-tab3" class="tab-pane fade">
<div class="card">
<div class="card-block">
<div class="consult-card-head"><h4>Recommended Footwear</h4></div>
<div class="row">
<div class="col-md-4" style="background-color:yellow;">
</div>
<div class="col-md-8">
<table class="table">
<tbody>
<tr>
<td><strong>Assessment Notes</strong></td>
</tr>
<tr>
<td>What width would be suitable? Would you like some cushioning under the heel? Add more lines in the recommendation and discussion with the patient and provider. Add more lines in the recommendation and discussion with the patient and provider.</td>
</tr>
</tbody>
</table>
</div>
</div>
<table class="table">
<thead class="thead-default">
<tr>
<th>ID</th>
<th>Category</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><a href="http://www.joggersworld.com.au/media/catalog/product/cache/1/image/930x/9df78eab33525d08d6e5fb8d27136e95/b/r/brooks_m_ghost_9_-_charcoal_-_1.jpg" target="_blank">51354</a></th>
<td>Jogger</td>
<td>Brooks</td>
<td>Ghost 9</td>
<td>11 US</td>
</tr>
<tr>
<th scope="row">51958</th>
<td>Jogger</td>
<td>Asics Gel</td>
<td>Pursue 3</td>
<td>11 US</td>
</tr>
<tr>
<th scope="row">51425</th>
<td>Jogger</td>
<td>Mizuno</td>
<td>Wave Rider</td>
<td>10.5 US</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="consult-tab4" class="tab-pane fade">
<div class="card">
<div class="card-block">
<div class="consult-card-head"><h4>Recommended Footwear</h4></div>
<table class="table">
<tbody>
<tr>
<th scope="row" class="col-consult-left">JW Consultant</th>
<td class="col-consult-right">Mario Covino</td>
</tr>
<tr>
<th scope="row">Assessment Notes</th>
<td>Some quick example text to build on the card title and make up the bulk of the card's content. Card title and make up the bulk of the card's content.</td>
</tr>
<table class="table">
<thead class="thead-default">
<tr>
<th>ID</th>
<th>Category</th>
<th>Brand</th>
<th>Model</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">51354</th>
<td>Mark</td>
<td>Otto</td>
<th>Nike</th>
<th>11 US</th>
</tr>
<tr>
<th scope="row">51958</th>
<td>Jacob</td>
<td>Thornton</td>
<td>Asics</td>
<th>11 US</th>
</tr>
<tr>
<th scope="row">51425</th>
<td>Larry</td>
<td>the Bird</td>
<td>Asics</td>
<th>10.5 US</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
Upvotes: 0
Views: 423
Answers (1)
shahzeb akram
Reputation: 926
There are many issues. First you are not passing consult to your template. Second check your link you are passing #consult-tab3 with your key which will cause the problem of fetching no data. I think this will solve your problem.
Link Update:
http://localhost:8080/consults/view-consult?key=aghkZXZ-Tm9uZXIVCxIIQ29uc3VsdHMYgICAgIDIkwoM
Handler Update:
class ViewConsultPage(webapp2.RequestHandler):
def get(self):
consult = ndb.Key(urlsafe=self.request.get('key')).get()
template = JINJA_ENVIRONMENT.get_template('/templates/view-consult.html')
template_values = {
'consult': consult
}
self.response.out.write(template.render(template_values))
Template Update: You can access the attributes here as you defined them in model.
<table class="table">
<tbody>
<tr>
<th scope="row" class="col-consult-left">Patient Name</th>
<td class="col-consult-right">{{consult.patient_first}}</td>
</tr>
<tr>
<th scope="row">Session Date</th>
<td>03-06-2017</td>
</tr>
<tr>
<th scope="row">Session Time</th>
<td>09:30 am</td>
</tr>
<tr>
<th scope="row">Status</th>
<td>Pending</td>
</tr>
<tr>
<th scope="row">Patient Email</th>
<td>[email protected]</td>
</tr>
<tr>
<th scope="row">Patient Phone</th>
<td>0412 345 678</td>
</tr>
</tbody>
Upvotes: 2
Related Questions
- Python Appengine - Pass two entities to jinja template view
- How to access properties of referenced objects in Jinja2 templates (Google App Engine)
- Reference property error/app engine won't render page
- Why can't I access a google app engine entity's key from within my jinja template
- Google App Engine Jinja2 - Templates not updating
- jinja2 on GAE writes out 'None' on every response
- Template Not Displaying GAE & Jinja2
- templating in python with GAE using GQL
- Unrelenting TemplateSyntaxErrors
- Jinja2 returns "None" string for Google App Engine models