Develop Reference

JInja2 Template Syntax Error Encountered Unknown tag 'endif'

I am building a basic api based website as I was going to display some info om page and was checking for a condition i encountered --
jinja2.exceptions.TemplateSyntaxError: Encountered unknown tag 'endif'. Jinja was looking for the following tags: 'endblock'. The innermost block that needs to be closed is 'block'.
Below is the palatte I copied form Bootstrap and was modifying and then the error happened -- And Yeah This is my first time posting question here as you can tell!
{% include "header.html" %}
{% block contnet %}
<div class="container-fluid">
<div class="row row-dark">
<div class="col px-2 py-5">
<h6 class="px-2 py-3">Click to Know Upcoming Events</h6>
<a href="{{ url_for('upcoming_events') }}"
><button type="button" class="btn btn-dark mx-2 my-3">Events</button></a
>
</div>
</div>
<div class="row">
<div class="col col-lg-4 col-md-6">
<table class="table table-borderless py-5 table-light">
<thead>
<tr class="table-light">
<th scope="col">Batting</th>
<th scope="col">Bowling</th>
<th scope="col">Wickets</th>
<th scope="col">Over</th>
</tr>
</thead>
<tbody>
{% if error %} # <========
<p>{{ error }}</p>
{% endif %} <======= Here is the error traceback
<tr>
<th scope="row"></th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}

You close the "if" twice ({% endif %}) but only open one...
Try this:
Click to Know Upcoming Events Events Batting Bowling Wickets Over
{% if error: %}
{{ error }}
{% endif %}
Mark Otto #mdo 2 Jacob Thornton #fat 3 Larry the Bird #twitter
{% endblock %}
You can move the {% endif %} where you want

Django template for loop is empty in another block

I have a function in my view.py:
#login_required(login_url='login')
def gpd(request,pk):
# get gpd by id
current_gpd = get_gpd(pk)
# get current campaign year #TODO check types
current_campaign = get_campaign(current_gpd.gpd_year)
# get all corporate goals for current campaign
corp_goals = CorporateGoal.objects.filter(gpd_year=current_campaign.year)
compl_weight = []
for goal in corp_goals:
compl_weight.append(goal.corp_factor_weight*current_gpd.bonus.corporate_component//100)
corporate_goals = zip(corp_goals, compl_weight)
if is_manager(request)!=None:
team = get_team(request)
context = {'gpd':current_gpd,
'corporate_goals':corporate_goals,
}
return render(request, 'app/gpd_forms/form_gpd.html', context)
else:
context = {'gpd':current_gpd,
'corporate_goals':corporate_goals,
}
return render(request, 'app/gpd_forms/form_gpd.html', context)
As you can see, in context I have corporate_goal.
My form_gpd.html:
{% extends 'app/navbar/main.html' %}
{% load static %}
{% block content %}
{% include 'app/slidebar/gpd_form_slidebar.html' %}
<div class="container" style="background-color:white">
<div class="row">
<div id="section2" class="container-fluid">
{% include 'app/gpd_blocks/corporate_goal.html' %}
</div>
</div>
<hr />
</div>
<div class="container" style="background-color:white">
<div class="row">
<div id="section5" class="container-fluid">
{% include 'app/gpd_blocks/summary.html' %}
</div>
</div>
<hr />
</div>
</div>
{% endblock %}
for example in corporate block I am executing next:
{% load static %}
{% block content %}
<div class="row" id="super">
<p>&nbsp</p>
</div>
<div class="row" id="super">
<div class="col-11" style="color: ivory; font-weight: bold; font-size: 1.3em;">
CORPORATE GOALS BLOCK
</div>
</div>
<div class="row" id="super">
<p>&nbsp</p>
</div>
{% for goal, compl_weight in corporate_goals %}
<hr style="height:2px;border:none;color:rgb(87, 124, 161);background-color:rgb(87, 124, 161);" />
<!-- Corporate goal section-->
<div class="row">
<div class="col">
Corp. Goal: {{ goal.corp_goal_title }}
</div>
</div>
<div class="row">
<div class="col-8">
<div>
{% if goal.corp_factor_rate %}
<p style="color:mediumspringgreen">rated</p>
{% else %}
<p style="color:indianred">unrated</p>
{% endif %}
</div>
</div>
<div class="col-3">
<div style="margin-inline-start:auto">
{{compl_weight}} % of total score
</div>
</div>
</div>
<!-- Tabs for details-->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#det1{{ goal.id }}">Goal Details</a></li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#det2{{ goal.id }}">Other Details</a></li>
</ul>
<!-- Tabs content for details-->
<div class="tab-content" >
<!--First tab-->
<div id="det1{{ goal.id }}" class="tab-pane fade show active">
<div class="row">
<!--Column 1-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Start Date</th>
<td width="50"></td>
<td>{{ goal.start_date }}</td>
</tr>
<tr>
<th>Weight</th>
<td width="20"></td>
<td>{{ goal.corp_factor_weight }} %</td>
</tr>
<tr>
<th><p>&nbsp</p></th>
</tr>
<tr>
<th style="color:dimgray">Goal description</th>
<td width="18"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="row">
<textarea class="form-control" readonly title="Description" style="background-color:aliceblue !important;">{{goal.corp_goal_description}}</textarea>
</div>
</div>
<!--Column 2-->
<div class="col">
<table class="table-bordless" style="margin-top:20px;">
<tbody>
<tr>
<th>Due Date</th>
<td width="50"></td>
<td>{{ goal.end_date }}</td>
</tr>
<tr>
<th>Factor Rate</th>
<td width="50"></td>
<td>
{% if goal.corp_factor_rate %}
{{ goal.corp_factor_rate }}
{% else %}
<div style="color:mediumspringgreen; font-weight: bold;">ongoing...</div>
{% endif %}
</td>
</tr>
<tr>
<th><p>&nbsp</p></th>
</tr>
<tr>
<th style="color:dimgray">Goal comment</th>
<td width="18"></td>
<td></td>
</tr>
</tbody>
</table>
<div class="row">
<textarea class="form-control" readonly title="Comment" style="background-color:aliceblue !important;">{{goal.corp_goal_comment}}</textarea>
</div>
</div>
</div>
</div>
<!--Second tab-->
<div id="det2{{ goal.id }}" class="tab-pane fade" style="margin-top:20px;">
<p>Factor for Goal Achievement:</p>
<table class="table">
<tbody>
<tr>
<th>Factor</th>
<td>0</td>
<th>Description</th>
<td>{{ goal.corp_factor_0 }}</td>
</tr>
<tr>
<th>Factor</th>
<td>1</td>
<th>Description</th>
<td>{{ goal.corp_factor_1 }}</td>
</tr>
<tr>
<th>Factor</th>
<td>2</td>
<th>Description</th>
<td>{{ goal.corp_factor_2 }}</td>
</tr>
<tr>
<th>Factor</th>
<td>3</td>
<th>Description</th>
<td>{{ goal.corp_factor_3 }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<br />
{% endfor %}
{% endblock %}
And it works perfectly. But when in last block summary I want to use corporate_goals one more time - I have nothing on my page, looks like corporate_goals is not exist.
my summary.html
{% load static %}
{% block content %}
<div class="row">
<p>123</p>
</div>
<div class="row">
{% for goal, compl_weight in corporate_goals %}
{{ goal.corp_goal_title }}
{% endfor %}
</div>
<div class="row">
<p>123</p>
</div>
{% endblock %}
Even If I copy all my code from corporate_goal.html into summary - I will have nothing. Why ?

I think that the problem is that your html structure has no sense. You have three {% block content %}. Please, delete the content blocks of your include files (corporate_goal.html and summary.html) and check if this is the problem. I think that one of your content block is overriding the other one.
Just to clarify, when you use the "include tag" is like you were pasting the code from other file. So imagine the result. You have a block content that contains two other block contents inside it.

My problem was in zip objects. When we are iterating through a zip object it is exhausted and you cannot iterate through it again. So, solution is corporate_goals = list(zip(corp_goals, compl_weight)). Anyway, thank you, #LaCharcaSoftware, for the advice, I've changed my structure to avoid duplication with block content.

Django Ajax Reorder Not Updating the Field in Database

I'm building a list of students by each class in the grade. I have a folder full of profile pictures for students downloaded into my img folder and a column within my model that maps the details (name, class, age, etc.) to the image name.
How do I tell my table to bring in the appropriate img for each student?
Below I have my code working to use a single image as a constant (e.g. student1's picture shows up for everyone).
list.html:
<table class="table table-hover" id="table-ajax">
<thead class="thead-light">
<tr>
{% comment %} <th></th> {% endcomment %}
<th style="width: 50px; text-align: center;"></th>
<th>{{ object_list|verbose_name:'field:name' }}</th>
<th>{{ object_list|verbose_name:'field:hometown' }}</th>
<th>{{ object_list|verbose_name:'field:birthday' }}</th>
<th>{{ object_list|verbose_name:'field:race' }}</th>
<th>{{ object_list|verbose_name:'field:rank' }}</th>
<th style="width: 50px; text-align: center;">Pictures</th>
<th style="width: 160px; text-align: center;">Actions</th>
</tr>
</thead>
<tbody class="order" data-url="{% url 'cms:reorder' model_name %}">
{% include 'app/partials/pick_list_partial.html' %}
</tbody>
partial-list.html:
{% for pick in object_list %}
<tr id="{{ pick.pk }}">
<td><img src="{% static 'img/student1.jpg' %}" width="50" height="50"></td>
<td>{{ pick.name }}</td>
<td>{{ pick.hometown }}</td>
<td>{{ pick.birthday }}</td>
<td>{{ pick.race }}</td>
<td>{{ pick.rank }}</td>
<td style="text-align: center;">
<a href="{% url 'app:file-list' pick.pk %}" class="btn btn-outline-success btn-sm border-0" title="Files">
<i class="fa fa-copy"></i></a></td>
<td style="text-align: center;">
<a href="{% get_object_url 'detail' pick %}" class="btn btn-outline-warning btn-sm border-0 ajax-load-form" title="View">
<i class="fa fa-eye"></i></a>
<a href="{% get_object_url 'update' pick %}" class="btn btn-outline-info btn-sm border-0 ajax-load-form" title="Edit">
<i class="fa fa-edit"></i></a>
<a href="{% get_object_url 'delete' pick %}" class="btn btn-outline-danger btn-sm border-0 ajax-load-form" title="Delete">
<i class="fa fa-trash-alt"></i></a>
<a href="" class="btn btn-sm border-0 reorder" title="Reorder">
<i class="fa fa-sort text-secondary"></i></a>
</td>
</tr>
{% empty %}
<tr class="table-warning nosort">
<td colspan="100%" class="text-center"><small class="text-muted">No {{ model_verbose_name_plural|lower }}</small>
</td>
</tr>
{% endfor %}

Assume, you have property image_path in your pick object that equals to img/student1.jpg. Then you should use it like this:
{% for pick in object_list %}
<tr id="{{ pick.pk }}">
<td><img src="{% static pick.image_path %}" width="50" height="50"></td>
<td>{{ pick.name }}</td>
<td>{{ pick.hometown }}</td>
<td>{{ pick.birthday }}</td>
<td>{{ pick.race }}</td>
<td>{{ pick.rank }}</td>
<td style="text-align: center;">
<a href="{% url 'app:file-list' pick.pk %}" class="btn btn-outline-success btn-sm border-0" title="Files">
<i class="fa fa-copy"></i></a></td>
<td style="text-align: center;">
<a href="{% get_object_url 'detail' pick %}" class="btn btn-outline-warning btn-sm border-0 ajax-load-form" title="View">
<i class="fa fa-eye"></i></a>
<a href="{% get_object_url 'update' pick %}" class="btn btn-outline-info btn-sm border-0 ajax-load-form" title="Edit">
<i class="fa fa-edit"></i></a>
<a href="{% get_object_url 'delete' pick %}" class="btn btn-outline-danger btn-sm border-0 ajax-load-form" title="Delete">
<i class="fa fa-trash-alt"></i></a>
<a href="" class="btn btn-sm border-0 reorder" title="Reorder">
<i class="fa fa-sort text-secondary"></i></a>
</td>
</tr>
{% empty %}
<tr class="table-warning nosort">
<td colspan="100%" class="text-center"><small class="text-muted">No {{ model_verbose_name_plural|lower }}</small>
</td>
</tr>

Too Many Values To Unpack While Rendering Data On A Template (Django)

VIEWS
def Aeging(request):
current_date_thirty = date.today().isoformat()
days_before_thirty = (date.today() - timedelta(days=30)).isoformat()
thirty = journalVoucher.objects.values('account_name_one').order_by('account_name_one').filter(voucher_date_one__range=[days_before_thirty,current_date_thirty]).annotate(outstanding=(Sum('credit_amount_one')-Sum('debit_amount_one')))
for item in thirty:
item['account_name_one'] = CreateLedger.objects.get(id=item['account_name_one'])
return thirty
context ={'thirty':thirty}
return render(request,'report/aeging/aeging_analysis.html',context)
<div class="row">
<div class="table-responsive col-md-6">
<table id="example" class="table table-bordered">
<caption style="caption-side:top; text-align: center;"><h3>0-30 Days</h3></caption>
<thead class="thead-dark">
<tr>
{# <th>S No.</th>#}
<th>Party Name</th>
<th>Total Amount</th>
</tr>
</thead>
<tbody>
{% for item in thirty %}
<tr class="table-success">
{# <td>{{ }} </td>#}
<td>{{item.account_name_one}}</td>
<td>{{ item.outstanding }} </td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr class="totalColumn">
<td style="visibility:hidden;"></td>
<td>Total:</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Hi The Query Is perfectly Run on python shell but when i render the data on a template it shows too many values to unpack (expected 2).
I Provide You My Views and Template Code.
Any Solution Of This??
Images Link..
https://drive.google.com/drive/folders/1V7uI4YS4Qg8ng4bmN0aCFvp85Dzi8n5S?usp=sharing

How to create collapsible cards in bootstrap in django template?

I have a table of these collapsible cards with dynamic content in them. The code I have taken from bootstrap looks like this:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
Problem
But as you can see, each collapse is controlled by this attribute multiCollapseExample1. In my django template, when I use this, on clicking any of the close button, only the first card collases because it has a static value of 1. How can I give it a dynamic value so every card opens and closes correctly? Reason I am asking is because my code is pretty complicated and is return about 10+ parameters from the views.py function, and I am iterating a dictionary of dictionaries to print all the values in the format I want. For that reason, I have about 4-5 nested for loops, and also an if statement which checks if the if looper counter is same as the parent's loop counter. I am not able to undertand how I can simple solve this problem.
This is my actual full code:
<table class="table mb-0 table-striped loadingplan">
<thead>
<tr>
<th>ID</th>
<th>Vehicles</th>
<th>Gross Weight</th>
<th>Route</th>
<th>Route Distance</th>
<th>Route TAT</th>
<th>ETD</th>
<th>ETA</th>
<th></th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for d,t,r,y,w,f in open_route_info %}
{% for k,v in open_trucks.items %}
{% if forloop.counter == forloop.parentloop.counter %}
<td class="align-middle">YNT1151<br>
<small class="align-right">{{ f }}% Filled</small>
</td>
<td>
{% for x in v %}
{% for y,z in x.items %}
{{ y.display_name }}
{% endfor %}
{% endfor %}
</td>
{% for truck,value in v.items %}
<td class="align-middle">{{ truck }} {{ value }}<br>o
<a href="#">
<small>Download Loading Plan {{ value.pk }}</small>
</a>
</td>
{% endfor %}
<td class="align-middle">{{ w }}KG</td>
<td class="align-middle">{{ k }}</td>
<td class="align-middle">{{ d }} KM</td>
<td class="align-middle">{{ t }}</td>
<td class="align-middle">{{ y }}</td>
<td class="align-middle">{{ scheduled_date }}</td>
<td class="align-middle">
<button class="btn" type="button" data-toggle="collapse"
data-target="#multiCollapseExample2" aria-expanded="false"
aria-controls="multiCollapseExample2"><img
src="{% static 'img/cardopen.svg' %}" alt="card open"></button>
</td>
<td class="align-middle">Raise RFQ
</td>
<tr class="collapse multi-collapse" id="multiCollapseExample2">
<td colspan="5">
<table class="table table-bordered">
<thead>
<tr>
<th>SKU ID</th>
<th>SKU Name</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{% for x in v %}
{% for y,z in x.items %}
{% for w in z %}
<tr>
<td>{{ w.name }}</td>
<td>{{ w.pid }}</td>
<td>{{ w.quantity }}</td>
</tr>
{% endfor %}
{% endfor %}
{% endfor %}
</tbody>
</table>
</td>
<td colspan="5" class="align-middle">
<div class="card card-body iframecard">
<iframe src="{{ r }}"></iframe>
</div>
</td>
</tr>
{% endif %}
{% endfor %}
{% endfor %}
</tbody>
</table>
What I want
All I want to do is, replace multiCollapseExample2 with a dynamic variable which is the same length as the number of items. I tried using a simple loop on a list which has the length as the number of items, but it did not work probably because of the if statement {% if forloop.counter == forloop.parentloop.counter %}.

Looks like you can use the 2 for-loops and their variables to create an unique id for your cards.
Something like
data-target="#multiCollapse{{d}}{{t}}{{k}}{{v}}"
Where d,t is from outer for-loop and k,v is from the inner loop.