I have the following html
{% extends "layout.html" %}
{% block title %}
Index
{% endblock %}
{% block main %}
<div>
<table class="table table-striped" id="mytab">
<thead>
<tr>
<th class="col col-1">Symbol</th>
<th class="col col-2">Name</th>
<th class="col col-3">Total Shares</th>
<th class="col col-4">Purchase Price</th>
<th class="col col-5">Current Price</th>
<th class="col col-6">Percent Change</th>
<th class="col col-7">Profit/Loss</th>
<th class="col col-8">Total</th>
</tr>
</thead>
{% for stock in stocks %}
<tbody>
<tr>
<td>{{ stock["symbol"] }}</td>
<td>{{ stock["name"] }}</td>
<td>{{ stock["sumshares"] }}</td>
<td>{{ stock["purchase_p"] | usd }}</td>
<td>{{ stock['ap'] | usd }}</td>
<td id="Perc_change">{{ stock['perc_change'] }}</td>
<td id="prolos">{{ stock['prolos'] | usd }}</td>
<td>{{ stock['total'] | usd }}</td>
</tr>
</tbody>
{% endfor %}
</table>
<div align="right" style=padding-bottom:20px>
<h4>Cash: {{ availableCash | usd }}</h4>
</div>
<div align="right">
<h4>Total Value: {{ grandTotal | usd }}</h4>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
var value=document.getElementById('Perc_change').innerHTML;
if (value>0) {
document.getElementById('Perc_change').style.color="green";
document.getElementById('Perc_change').innerHTML += "%";
document.getElementById('Perc_change').innerHTML += "▲";
document.getElementById('prolos').style.color="green";
}
if(value<0) {
document.getElementById('Perc_change').style.color="red";
document.getElementById('Perc_change').innerHTML += "%";
document.getElementById('Perc_change').innerHTML += "▼";
document.getElementById('prolos').style.color="red";
}
});
</script>
{% endblock %}
What I am trying to do is to write a for loop that will go over each row (could be many stocks in Index) and execute the JS written below. (note: I have removed the for loop I had as it did not work) the current script is working where there is only one row in the Index.
Solved it by using Jinja so if anyone will be of interest this what I have done:
{% extends "layout.html" %}
{% block title %}
Index
{% endblock %}
{% block main %}
<div>
<table class="table table-striped">
<thead>
<tr>
<th>Symbol</th>
<th>Name</th>
<th>Total Shares</th>
<th>Purchase Price</th>
<th>Current Price</th>
<th>Percent Change</th>
<th>Profit/Loss</th>
<th>Total</th>
</tr>
</thead>
{% for stock in stocks %}
<tbody>
<tr>
<td>{{ stock["symbol"] }}</td>
<td>{{ stock["name"] }}</td>
<td>{{ stock["sumshares"] }}</td>
<td>{{ stock["purchase_p"] | usd }}</td>
<td>{{ stock['ap'] | usd }}</td>
{% if stock['perc_change'] > 0 %}
<td style="color:green;">▲{{ stock['perc_change'] }}%</td>
<td style="color:green;">{{ stock['prolos'] | usd }}</td>
{% elif stock['perc_change'] < 0 %}
<td style="color:red;">▼{{ stock['perc_change'] }}%</td>
<td style="color:red;">{{ stock['prolos'] | usd }}</td>
{% else %}
<td style="color:gray;">{{ stock['perc_change'] }}%</td>
<td style="color:gray;">{{ 0.00 | usd }}</td>
{% endif %}
<td>{{ stock['total'] | usd }}</td>
</tr>
</tbody>
{% endfor %}
</table>
<div style=padding-bottom:20px>
<h4>Cash: {{ availableCash | usd }}</h4>
</div>
<div style=padding-bottom:20px>
<h4>Total Value: {{ grandTotal | usd }}</h4>
</div>
<div>
{% if totalprolos > 0 %}
<h4 class="inline">Total Profit/Loss:</h4>
<h4 class="inline" style="color:green;">▲{{ totalprolos | usd }}</h4>
{% elif totalprolos < 0 %}
<h4 class="inline">Total Profit/Loss:</h4>
<h4 class="inline" style="color:red;">▼{{ totalprolos | usd }}</h4>
{% else %}
<h4 class="inline">Total Profit/Loss:</h4>
<h4 class="inline" style="color:gray;">{{ totalprolos | usd }}</h4>
{% endif %}
</div>
{% endblock %}
This will show on the table of stocks an arrow up and the percent change if the stock went up, and red if down. JS wasn't needed as Jinja has a more straightforward solution.
Related
I have a table that shows details about all the assets. I want the records in the table to be filtered on the basis of different attributes of the table. For now I have tried to create a filter on currentOwner field using JavaScript, but it is not working.
Here is the html file:
{% extends "assets/base.html" %}
{% block content %}
<div class="container">
<legend class="border-bottom mb-4">Hello {{ request.user }}</legend>
</br>
<table class="table" id="admin-asset-table">
<tr>
<th>Asset ID</th>
<th>Asset Type</th>
<th>Asset Name</th>
<th>Brand</th>
<th>Is Active</th>
<th>
<select id="searchddl" onclick="searchOwner();">
<option disabled="true" selected>-- Current Owner --</option>
{% for user in users %}
<option value="{{asset.currentOwner}}">
{{user.username}}
</option>
{% endfor %}
</select>
</th>
<!-- <th>Current Owner</th> -->
</tr>
{% for asset in assets %}
<tr>
<td>{{ asset.id }}</td>
<td>{{ asset.asset_type }}</td>
<td>{{ asset.asset_name }}</td>
<td>{{ asset.brand }}</td>
<td>{{ asset.isActive }}</td>
<td>{{ asset.currentOwner }}</td>
</tr>
{% endfor %}
</table>
</div>
<script type="text/javascript">
function searchOwner()
{
var input,table,tr,td,filter,i;
input=document.getElementById("searchddl");
filter=input.value.toUpperCase();
table=document.getElementById("admin-asset-table");
tr=table.getElementsByTagName("tr");
for(i=0; i<tr.length; i++)
{
td=tr[i].getElementsByTagName("td")[3];
if(td)
{
displaydata=td.innerText;
if(displaydata.toUpperCase().indexOf(filter)>-1)
{
tr[i].style.display="";
}
else
{
tr[i].style.display="none";
}
}
}
}
</script>
{% endblock content%}
Please let me know what is wrong with this. Also let me know if there is any possible way to apply multiple filters of this kind.
I have a flask app with a jinja table, one of the columns has the value = 1 when that row meets a criteria.
For every row that a 1 is present in that column i would like to replace it with a circle, for example:
How would I add it to my jinja table?
<table>
<thead>
<tr>
{% for col in column_names %}
<th>
{{col}}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in row_data %}
<tr>
{% for col, row_ in zip(column_names, row) %}
{% if loop.index == 1 %}
<td>
IF {{ row[16] }} == 1 then <div class="circle" style="float: left;">LB</div>
else ''
end
{{row_}}</td>
{% else %}
<td>{{row_}}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
HTML/CSS code of div i want to appear in that cell
.circle
{
width:20px;
height:20px;
border-radius:10px;
font-size:8px;
color:#fff;
line-height:20px;
text-align:center;
background:#000
}
<div class="circle" style="float: left;">LB</div>
Solution
Try the following.
The one-line if-else statement in jinja2 looks like this:
{{ OUTPUT_WHEN_TRUE if condition else OUTPUT_WHEN_FLASE }}
So, in your case, the code within for each <td></td> (where loop.index == 1 over the inner loop) will look like this:
{{ '<div class="circle" style="float: left;">LB</div>' if row[16] == 1 else '' }} {{ row_ }}
Code
<table>
<thead>
<tr>
{% for col in column_names %}
<th>
{{col}}
</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for row in row_data %}
{% set row_loop = loop %}
<tr>
{% for col, row_ in zip(column_names, row) %}
{% set col_loop = loop %}
{# Choose which loop: row or col you are referring to #}
{% if col_loop.index == 1 %}
<td>
{{ '<div class="circle" style="float: left;">LB</div>' if row[16] == 1 else '' }} {{ row_ }}
</td>
{% else %}
<td>{{ row_ }}</td>
{% endif %}
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
References
Get loop index of outer loop
Jinja Docs - Accessing the parent Loop
Jinja shorthand conditional: one-line if-else
I am trying to add from one table to another with .click and i got it to work
but now when i try to use the search field on the top table it clears the appended rows from the bottom table
I need to get these to start generating a table under it so that i can delete them all together
$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
$(this).css("background-color", "#f4a941")
.appendTo("#student-table3 tbody");
});
$("#student-table2").DataTable();
$("body").on("click", "#student-table2 tbody tr", function(){
$("#student-table3").data("stu-id", $(this).data("id"))
.data("stu-name", $(this)
.data("name"));
});
$("#access-table").DataTable();
$(".datetimepicker").datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
});
});
Like i mentioned, it seems i can add the data to the table , but it wont store the row i select on table 2 when i use the search field atop the first table
I was thinking , maybe i can just have jquery generate the entire table with table placeholders already set in place? and not have it at all in HTML like i do, see under, i have student-table and student-table2 stacked
Here's my HTML
{% include "core/header.html" %}
{% load widget_tweaks %}
<section class="ids-section form-section">
<h2>{{ title }}</h2>
<h2> All Students </h2>
<table id="student-table2" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.school }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2> Selected for Delete </h2>
<table id="students-table3" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<br>
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.dealership }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
</tbody>
</table>
</section>
</div>
{% include "core/footer.html" %}
I figured out that i actually was on the right track, i didnt know .dataTables() was a bootstrap marker for the tables so i simplified the remfunc.js file to
/* Main part- on click adds to second table */
$(document).ready(function(){
$("#student-table2 tbody tr").click(function(){
$(this).appendTo("#student-table3 tbody");
});
/* Formats the table to coginate,
gives it an inputFilter and wraps it.
*/
$("#student-table2").DataTable();
});
$("#access-table").DataTable();
$(".datetimepicker").datetimepicker({
format: 'MM/dd/yyyy hh:mm:ss',
});
});
with and html file that looked like
{% include "core/header.html" %}
{% load widget_tweaks %}
<section class="ids-section form-section">
<h2>{{ title }}</h2>
<h2> All Students </h2>
<table id="student-table2" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
{% for stu in students %}
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.school }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2> Selected for Delete </h2>
<table id="students-table3" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>School</th>
<th>License Plate</th>
<th>Active</th>
<th>Code</th>
<th>Added</th>
</tr>
</thead>
<tbody>
<br>
<tr data-id="{{ stu.id }}" data-name="{{ stu.name }}">
<td>{{ stu.name }}</td>
<td>{{ stu.dealership }}</td>
<td>{{ stu.license_plate }}</td>
<td>{{ stu.active }}</td>
<td>{{ stu.code }}</td>
<td>{{ stu.created }}</td>
</tr>
</tbody>
</table>
</section>
</div>
{% include "core/footer.html" %}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 5 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I can't figure-out why this error occuring,
{% block body %}
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<br>
<div class="header"><h3>Ongoing Matches</h3></div>
<br>
<h3>{{ datestring_today }}</h3>
<br>
<script src="//www.cricruns.com/widget/widget_livebar.js" type="text/javascript"></script>
<! --summary---->
<div class="list-group">
{% for game in gamest %}
{% if game[]}
<a class="score-size text-xs-center nounderline list-group-item list-group-item-action" >
<div class="row">
<div class="col-xs-4">
{% if game["Batting_team_img"] %}
<img class="team-logo" src="/static/{{ game["Batting_team_img"] }}">
{% endif %}
{{ game["Batting team"] }} {{ game["runs10"] }}
</b>
<br>
{{ game["wickets10"] }}
</div>
<div class="col-xs-4 broadcast-column">
<div class="final-text">
{{ game["status2"] }}
</div>
<div class="broadcaster">
{{ game["series2"] }}
</div>
</div>
<div class="col-xs-4">
{% if game["Bowling_team_img"] %}
<img class="team-logo" src="/static/{{ game["Bowling_team_img"] }}">
{% endif %}
{{ game["Bowling team"] }} {{ game["runs20"] }}
</b>
<br>
{{ game["wickets20"] }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</div>
<br></br>
<div class="row">
<div class="col-lg-12">
<table class="standings-datatable table table-sm">
<thead>
<tr class="bg-primary text-white">
<th class="text-lg-center">Match Type</th>
<th class="bg-danger text-lg-center">Series</th>
<th class="bg-dark text-lg-center">Team vs Team</th>
<th class="bg-info text-lg-center">Status</th>
<th class="bg-light text-lg-center">Batting </th>
<th class="bg-primary text-lg-center">Runs</th>
<th class="bg-secondary text-lg-center">Wickets</th>
<th class="bg-success text-lg-center">Overs</th>
<th class="bg-transparent text-lg-center">Batsman Name</th>
<th class="bg-warning text-lg-center">Batsman Score</th>
<th class="bg-transparent text-lg-center">Batsman Name</th>
<th class="bg-warning text-lg-center">Batsman Score</th>
<th class="bg-transparent text-lg-center">Bowler Name</th>
<th class="bg-warning text-lg-center">Bowler Wickets</th>
<th class="bg-transparent text-lg-center">Bowler Name</th>
<th class="bg-warning text-lg-center">Bowler Wickets</th>
</tr>
</thead>
<tbody>
{% for game in gamest %}
<tr class="table table-bordered">
<td >{{ game['matchtype2'] }}</td>
<td>{{ game['series2'] }}</td>
<td>{{ game['teams2'] }}</td>
<td>{{ game['status2'] }}</td>
<td>{{ game['Batting team'] }}</td>
<td>{{ game['runs10'] }}</td>
<td>{{ game['wickets10'] }}</td>
<td>{{ game['overs10'] }}</td>
<td>{{ game['name1'] }}</td>
<td>{{ game['runs1'] }}</td>
<td>{{ game['name2'] }}</td>
<td>{{ game['runs2'] }}</td>
<td>{{ game['name5'] }}</td>
<td>{{ game['wickets5'] }}</td>
<td>{{ game['name6'] }}</td>
<td>{{ game['wickets6'] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<br></br>
<table class="standings-datatable table table-sm">
<thead class="thead-inverse">
<tbody>
<tr>
<th class="bg-dark text-lg-left">TEAM</th>
<th class="bg-dark text-lg-center">M</th>
<th class="bg-dark text-lg-left">W</th>
<th class="bg-dark text-lg-left">L</th>
<th class="bg-dark text-lg-left">T</th>
<th class="bg-dark text-lg-left">N/R</th>
<th class="bg-dark text-lg-left">PT</th>
<th class="bg-dark text-lg-left">NRR</th>
<th class="bg-dark text-lg-left">FOR</th>
<th class="bg-dark text-lg-left">AGAINST</th>
</tr>
</thead>
{% for key in tabledata %}
<tr>
<td>{{ key['Sydney image'] }}</td>
<td>{{ key['Sydney Thunder M'] }}</td>
<td>{{ key['Sydney Thunder For'] }}</td>
<td>{{ key['Sydney Thunder PT'] }}</td>
<td>{{ key['Sydney Thunder W'] }}</td>
<td>{{ key['Sydney THunder AGAINST'] }}</td>
<td>{{ key['Sydney THunder N/R'] }}</td>
<td>{{ key['Sydney THunder L'] }}</td>
<td>{{ key['Sydney THunder T'] }}</td>
<td>{{ key['Sydney THunder NRR'] }}</td>
</tr>
<tr>
<td>{{ key['Brisbane image'] }}</td>
<td>{{ key['Brisbane Heat M'] }}</td>
<td>{{ key['Brisbane Heat For'] }}</td>
<td>{{ key['Brisbane Heat PT'] }}</td>
<td>{{ key['Brisbane Heat W'] }}</td>
<td>{{ key['Brisbane Heat AGAINST'] }}</td>
<td>{{ key['Brisbane Heat N/R'] }}</td>
<td>{{ key['Brisbane Heat L'] }}</td>
<td>{{ key['Brisbane Heat T'] }}</td>
<td>{{ key['Brisbane Heat NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Adelaide strikers image'] }}</td>
<td>{{ key['Adelaide Strikers M'] }}</td>
<td>{{ key['Adelaide Strikers For'] }}</td>
<td>{{ key['Adelaide Strikers PT'] }}</td>
<td>{{ key['Adelaide Strikers W'] }}</td>
<td>{{ key['Adelaide Strikers AGAINST'] }}</td>
<td>{{ key['Adelaide Strikers N/R'] }}</td>
<td>{{ key['Adelaide Strikers L'] }}</td>
<td>{{ key['Adelaide Strikers T'] }}</td>
<td>{{ key['Adelaide Strikers NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Horbat Hurricanes image'] }}</td>
<td>{{ key['Horbat Hurricanes M'] }}</td>
<td>{{ key['Horbat Hurricanes For'] }}</td>
<td>{{ key['Horbat Hurricanes PT'] }}</td>
<td>{{ key['Horbat Hurricanes W'] }}</td>
<td>{{ key['Horbat Hurricanes AGAINST'] }}</td>
<td>{{ key['Horbat Hurricanes N/R'] }}</td>
<td>{{ key['Horbat Hurricanes L'] }}</td>
<td>{{ key['Horbat Hurricanes T'] }}</td>
<td>{{ key['Horbat Hurricanes NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Melbourne Renegades image'] }}</td>
<td>{{ key['Melbourne Renegades M'] }}</td>
<td>{{ key['Melbourne Renegades For'] }}</td>
<td>{{ key['Melbourne Renegades PT'] }}</td>
<td>{{ key['Melbourne Renegades W'] }}</td>
<td>{{ key['Melbourne Renegades AGAINST'] }}</td>
<td>{{ key['Melbourne Renegades N/R'] }}</td>
<td>{{ key['Melbourne Renegades L'] }}</td>
<td>{{ key['Melbourne Renegades T'] }}</td>
<td>{{ key['Melbourne Renegades NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Melbourne stars image'] }}</td>
<td>{{ key['Melbourne stars M'] }}</td>
<td>{{ key['Melbourne stars For'] }}</td>
<td>{{ key['Melbourne stars PT'] }}</td>
<td>{{ key['Melbourne stars W'] }}</td>
<td>{{ key['Melbourne stars AGAINST'] }}</td>
<td>{{ key['Melbourne stars N/R'] }}</td>
<td>{{ key['Melbourne stars L'] }}</td>
<td>{{ key['Melbourne stars T'] }}</td>
<td>{{ key['Melbourne stars NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Perth Scorchers image'] }}</td>
<td>{{ key['Perth Scorchers M'] }}</td>
<td>{{ key['Perth Scorchers For'] }}</td>
<td>{{ key['Perth Scorchers PT'] }}</td>
<td>{{ key['Perth Scorchers W'] }}</td>
<td>{{ key['Perth Scorchers AGAINST'] }}</td>
<td>{{ key['Perth Scorchers N/R'] }}</td>
<td>{{ key['Perth Scorchers L'] }}</td>
<td>{{ key['Perth Scorchers T'] }}</td>
<td>{{ key['Perth Scorchers NRR'] }}</td>
</tr>
<tr >
<td>{{ key['Sydney Sixers image'] }}</td>
<td>{{ key['Sydney Sixers M'] }}</td>
<td>{{ key['Sydney Sixers For'] }}</td>
<td>{{ key['Sydney Sixers PT'] }}</td>
<td>{{ key['Sydney Sixers W'] }}</td>
<td>{{ key['Sydney Sixers AGAINST'] }}</td>
<td>{{ key['Sydney Sixers N/R'] }}</td>
<td>{{ key['Sydney Sixers L'] }}</td>
<td>{{ key['Sydney Sixers T'] }}</td>
<td>{{ key['Sydney Sixers NRR'] }}</td>
</tr>
{%endfor%}
</tbody>
</table>
<div class="row">
<div class="col-lg-6">
<a class="twitter-timeline" href="https://twitter.com/nikilr14/lists/hot-cric-tweets?ref_src=twsrc%5Etfw"data-aria-polite="assertive"data-chrome="noheader nofooter noborders scrollbar"data-width="500"
data-height="500">A Twitter List by nikilr14</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-lg-6">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<script>
var channelID = "UCSRQXk5yErn4e14vN76upOw";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
</script>
</div>
<div class="row">
<!-- Bballbreakdown -->
<div class="col-lg-6">
{% for title, link in cricinfo_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/espncricinfo.png">
</a>
<br>
{% endfor %}
</div>
<!-- Fansided Nylon Calculus -->
<div class="col-lg-6">
{% for title, link in cricbuzz_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/cricbuzz.png">
</a>
<br>
{% endfor %}
</div>
</div>
<div class="col-lg-6">
{% for title, link in yahoonews_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/yahoocricnews.png">
</a>
<br>
{% endfor %}
</div>
<div class="col-lg-6">
{% for title, link in bigbash_posts.items() %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="{{ link }}">
{{ title }} <img class="team-logo" src="/static/images/bbl.png">
</a>
<br>
{% endfor %}
</div>
</div>
<!-- Reddit -->
<div class="row">
<div class="col-lg-6">
{% for i in range(1, 10, 2) %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="https://reddit.com{{ hot_Cricket_posts[i].permalink }}">
{{ hot_Cricket_posts[i].title }} <img class="team-logo" src="/static/images/reddit.png">
</a>
<br>
{% endfor %}
</div>
<div class="col-lg-6">
{% for i in range(2, 11, 2) %}
<a class="reddit-boxes nounderline list-group-item list-group-item-action" href="https://reddit.com{{ hot_Cricket_posts[i].permalink }}">
{{ hot_Cricket_posts[i].title }} <img class="team-logo" src="/static/images/reddit.png">
</a>
<br>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
sorry for irregular in code structure, any improvement in the code will be appreciated, I looked every '}' in code but I didn't find any wrong syntax.I looked into jinja2 documentation, my code followed every syntax rules as mentioned in documentation yet I'm getting template syntax error, If you want to know more about the code feel free to ask, thanks.
Check out these lines:
{% for game in gamest %}
{% if game[]}
...
You are missing the closing % character.
You might receive an error about game[] as well.
I have a problem when i View my html page in PDF-form. The problem is that when the number values are to big then it breaks the line between the minus symbol and values.
Here is an example of the hmtl page, it works perfect
enter image description here
Then when i convert it to a PDF it looks like this:
enter image description here
Here i Render my page to a full html document:
def document_to_html_document(document):
"""
Renders the invoice to a full html document with <html>, <head>, and <body> tags.
"""
return render_to_string('invoice_print.html', {
'body': document_to_html(document),
'document': document,
'base_url': settings.SITE_BASE_URL
})
The code where i build the HTML string and converting it to a pdf:
def document_to_pdf(document, server_base_url, target=None):
# Build HTML string
html = document_to_html_document(document)
# Setup input and output files
html_file = tempfile.NamedTemporaryFile(suffix='.html')
html_file.write(document_to_html_document(document).encode())
target = target or tempfile.NamedTemporaryFile()
# Convert to pdf
command = 'xvfb-run wkhtmltopdf --footer-right "[page]/[topage]"{s} {o}'.format(
s=html_file.name,
o=target.name
)
s = subprocess.Popen(command, shell=True)
s.communicate()
# Return pdf bytes
target.seek(0)
return target.read()
This is my hmtl code where i add the "body":
<html>
<head>
<title>MOSEK-{{ document }}</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- JQuery -->
<script src="{{ base_url }}static/assets/vendor/jquery-1.11.1.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ base_url }}static/assets/vendor/bootstrap-3.1.1-dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="{{ base_url }}static/assets/vendor/bootstrap-3.1.1-dist/css/bootstrap-theme.css">
<!-- Latest compiled and minified JavaScript -->
<script src="{{ base_url }}static/assets/vendor/bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<style>
body {
width: 950px;
}
</style>
</head>
<body>
<div>
<div class="container">
{{ body|safe }}
</div>
</div>
</body>
I have no idea how to solve it, any help would be appreciated :)
This is the content of the Invoice_body:
<div class="row">
<div class="col-xs-12">
<table class="invoice-lines">
<thead>
<tr class="underline overline">
<th>No.</th>
<th>Part ID / Description</th>
<th class="nowrap fr sec-column">Quantity</th>
<th class="nowrap fr sec-column">List price</th>
<th class="nowrap fr sec-column">Unit price</th>
<th class="nowrap fr sec-column">Total</th>
</tr>
</thead>
<tbody>
{# We want the border-bottom of the last line to be darker. #}
{# In order to find this last line, we first need to determine #}
{# if there are custom items. If there are, then the last line #}
{# will be a custom item, since they are printed last. If not, #}
{# then we need to find the last product line. #}
{% for line in lines %}
{% with lines|next:forloop.counter0 as next_line %}
<tr class="line{% if not citems and not next_line %} last-line{% endif %}">
<td>{{ line.line }}</td>
<td>
{% if line.objs.0.product.name %}
{{ line.objs.0.product.name }}<br />
{% else %}
{{ line.objs.0.serial.product.name }}-{% if line.objs.0.back == 1 %}BACK{% endif %}MAIN<br />
{% endif %}
{% if line.objs.0.back and line.objs.0.back_description != '' %}
{{ line.objs.0.back_description }}<br />
{% elif line.objs.0.back == False and line.objs.0.description != '' %}
{{ line.objs.0.description }}<br />
{% else %}
{{ line.objs.0.description }}<br />
{% endif %}
{% if line.objs.0.start %}
Period: {{ line.objs.0.start }} - {{ line.objs.0.end }}<br />
{% endif %}
Serial(s): {{ line.list }}
</td>
<td class="nowrap fr sec-column">{{ line.qty }}</td>
<td class="nowrap fr sec-column">{{ line.objs.0.price|floatformat:2 }}</td>
<td class="nowrap fr sec-column">
{{ line.objs.0.subtotal|floatformat:2 }}
{% if line.discount %}<br>({{ line.discount }}% dis.){% endif %}
</td>
<td class="nowrap fr sec-column">{{ line.rowtotal|floatformat:2 }}</td>
</tr>
{% endwith %}
{% endfor %}
{% for citem in citems %}
{% with citems|next:forloop.counter0 as next_citem %}
<tr class="line{% if not next_citem %} last-line{% endif %}">
<td>{{ citem.line }}</td>
<td>
{{ citem.obj.name }}
{% if citem.obj.agreement %}
<br>Agreement: {{ citem.obj.agreement }}
{% endif %}
</td>
<td class="sec-column"> </td>
<td class="fr sec-column">{{ citem.rowtotal|floatformat:2 }}</td>
<td class="fr sec-column">{{ citem.rowtotal|floatformat:2 }}</td>
<td class="fr sec-column">{{ citem.rowtotal|floatformat:2 }}</td>
</tr>
{% endwith %}
{% endfor %}
<tr class="sum-line" id="subtotal-line">
<th colspan="4" class="fr">Subtotal</th>
<th> </th>
<td class="fr sec-column">{{ inv.subtotal|floatformat:2 }}</td>
</tr>
{% for vat, lines, message, total, rate in vats %}
<tr class="sum-line">
<td colspan="4" class="fr">
<span class="nowrap">Line {{ lines }} : </span>
{{ message }}
<span class="nowrap"> ({{ rate }}% VAT)</span>
</td>
<td class="fr sec-column">{{ total }}</td>
<th> </th>
</tr>
{% endfor %}
<tr class="sum-line">
<th colspan="4" class="fr">VAT total</th>
<th> </th>
<td class="fr sec-column">{{ inv.vat|floatformat:2 }}</td>
</tr>
<tr class="sum-line">
<th colspan="4" class="fr">Total ({{ inv.currency }})</th>
<th> </th>
<td class="fr grand-total overline sec-column">{{ inv.total|floatformat:2 }}</td>
</tr>
</tbody>
</table>
</div>
</div>
add the flag zoom to the export command:
command= xvfb-run wkhtmltopdf --zoom 1.5 --footer-right
The solution from Eliethesaiyan:
in the command= xvfb-run wkhtmltopdf --zoom 1.5 --footer-right