I'm attempting to create an expanding list displaying elements of a model that I have in django, but I'm having trouble getting the bootstrap 5 collapse function to work with the data from django. I'm relatively new to both, getting back into coding after an extended break. The code works if I replace id="{{saga.name}} with id="placeholder" and href="#{{ saga.name }}" with href="#placeholder", but refuses to do anything with the code as is.
Is there something going on with how bootstrap 5 interprets the data? I feel like I'm going crazy here.
{% for saga in sagaMemberList %}
{{ saga.name }}
<a class="btn btn-primary" data-toggle="collapse" href="#{{ saga.name }}" role="button" aria-expanded="false" aria-controls="collapse{{ saga.name }}">dropdown</a>
<div class="collapse" id="{{ saga.name }}">
{% for character in mSagaCharacterList|get_item:saga %}
<div class="row"><div class="col">
{{ character.name }}
</div></div>
{% endfor %}
</div>
<br>
{% endfor %}
I'm know it's not the prettiest code and I'm sure it's inefficient as hell, but I'm really struggling to understand why it's not working. Thanks for any insight any of you might have.
After puzzling with it for forever I figured out the answer right after I posted the question, which in hindsight should be obvious. Posting here in case anyone else stumbles across this.
html ids cannot contain whitespace, and the saga.name I was using contained whitespace. Still not sure why {{forloop.counter}} didn't work, but I got around it by adding a method to my model that returned the name in an accepted way.
Related
I am using wtforms as part of a Python + Flask project. There are some cases where I want multiple fields of a form to appear on the same line on the webpage. With SelectField, this works as expected. However, when I use IntegerField, it seems to automatically create a new line after the field is displayed, and I get have more than one on a line.
The Form:
class PremiumMandatory(FlaskForm):
match_dol = IntegerField('Dollar')
match_per = IntegerField('Percent')
The .html
{{form.match_dol.label}}
${{form.match_dol(size=3)}}
 
{{form.match_per(size=3)}}%
{% for error in form.match_per.errors %}
Using the above, the two fields also appear on different lines on the webpage. Ho do I keep then on the same line?
This is an entirely HTML/CSS problem. There are many ways to put multiple fields of a form on the same line, for example, you could use Bootstrap's grid system, which is very easy to use.
Another simple way is:
<form>
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
{{ form.match_dol.label }}
{{ form.match_dol(size=3) }}
</div>
<div style="display: table-cell;">
{{ form.match_per.label }}
{{ form.match_per(size=3) }}
</div>
</div>
<div style="display: table-row;">
...
</div>
</div>
</form>
I want to find the difference between two different values. But, I am getting a Jinja2 error. I am not sure about how to find the difference in this template.
I tried using - operator but this did not work. So, I used sub to find the difference between actual and predicted score.
{% for e in question.essays %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{loop.index}}</h3>
</div>
<div class="panel-body">
<div class="actual-score">Actual score: {% if e.actual_score %} {{e.actual_score|round(1)}}/5{% endif %}</div>
<div class="predicted-score">Predicted score: {% if e.predicted_score %}{{e.predicted_score|round(1)}}/5{% endif %}</div>
<p class="essay-text">Text: {{e.text}}</p>
<div class="diff">Difference: {{ e.actual_score|sub(e.predicted_score)}} </div>
</div>
I am getting this error:
TemplateAssertionError: no filter named 'sub'
According to the Jinja2 documentation, using - should work pretty fine. Also from my end, it is working just fine. Mind posting the error message you get when using the operator. I also cannot find the sub tag in the documentation for Jinja2.
Therefore, as Amazing Things Around You has said, I think this should work:
{{ e.actual_score - e.predicted_score }}
Just a side note, the only other template tag I have found that does arithmetic operations close to that is Django's add tag, which also does not do subtraction.
Gooday to all. I have been googling about some solutions on how to do this. I would like to print newlines from my database to html (like php's nl2br) So, I have stumbled on a post that says use <pre></pre> but it encapsulates the paragraph on a table like container
It would not be any problem on a desktop but on mobile, you are gonna have to scroll side to side to see the contents, is there any way to print out something like this? (just the newlines without the pesky container like thing )
if I just call it directly using
{{article.notes | safe }}
It does not print newline. It just goes on like
1.Thisisacontentblablabla2.foobarbarbarbar3.loremipsumilovetoeatnoodles4.test
here is the code on html
{% extends 'layout.html' %}
{% block body %}
<center>
<h1>{{article.topic_name | safe }}</h1>
<input type="submit" value="Edit" class="btn btn-danger">
</center>
<div>
<h2> Procedures: </h2>
<pre>
<p align="left"> {{article.explaination | safe }} </p>
</pre>
</div>
<div>
<h2> User Notes: </h2>
<pre>
<p align="left"> {{article.notes | safe }} </p>
</pre>
</div>
<div>
<h2> Commands: </h2>
<pre>
<p align="left"> {{article.commands | safe }} </p>
</pre>
</div>
{% endblock %}
Thankyou So Much in advance :)
I found solution to this problem which caused another problem but thats another topic for another day :)
{{something | safe}}
Just pipe it in the safe tag and it will execute the
I still have not found the solution about Xss on this. since it executes the tags. it also executes malicious javascript tags. Ill ask a new question on this
I wanted to print barcodes using for loop in python. This is my code:
`{%- from "templates/print_formats/standard_macros.html" import add_header -%}
<hr>
{% set a = doc.end %}
{% set count = 0 %}
<div class="row">
{%- for i in range(doc.start,doc.end) -%}
<div class="col-md-4 text-center">
<p style="font-family: Code39AzaleaFont;font-weight: normal;font-style: normal;font-size:30px;">
00000000000000{{ i }}</p>
{% set count = count + 1 %}
{{count}}
<br/>
</div>
{%- endfor -%}
</div>
<hr>
<br>
<p class="strong">
<br>
<br>
<br>
{{ _("Authorized Signatory") }}
</p>
</div>`
The problem is,I wanted to restrict the number of barcodes printed on one sheet of paper to 24.Is there any way to do that?
You can add a page break after every 24th barcode using:
{% if count % 24 %}<div style="page-break-before: always;"></div>{% endif %}
HTML doesn't have a really good concept of "paper sheet size". A HTML page has an infinite height and browser's are notoriously bad a printing HTML in a readable way (with the notable exception of Opera).
With CSS 3, three page break properties were defined.
They might be supported by your browser. If they are, then wrap 24 bar codes in a <div> and give that <div> a class which tells the browser to break the page afterwards.
If the browser emits an empty page at the end, then you need two classes: One for the first <div> without a page break and one for every successive <div> and a page-break-before: always;
If that doesn't work well, you should look at PDF. PDF allows you place elements exactly on pages with a known, fixed size.
My web app currently has 3 pages. I obtained a user input on the first page, which I passed to my view.py, and calculated some variables I needed for my 2nd page. I want to pass the variables that exist in my 2nd page to the third page, but don't know how to go about it. Any suggestions on how to modify the html for the 2nd page to achieve this?
So far, I'm solving this problem by making my variables global in view.py. This seems to work but doesn't seem to be a viable long-term solution.
Thanks!
existing variables: thePrediction, theData
The html for the 2nd page:
<div class = "caption-full">
<h3>Currently, I have a {{thePercentage}} chance of getting adopted.</h3>
{% if thePrediction[1] + thePrediction[2] >0%}
<form action="/third_page" method="GET">
<button class="btn btn-large btn-info" >Go to third page</button>
</form>
{% endif %}
</div>
I think I figured it out:
<div class = "caption-full">
<h3>Currently, I have a {{thePercentage}} chance of getting adopted.</h3>
{% if thePrediction[1] + thePrediction[2] >0%}
<form action="/third_page" method="GET">
<input type="hidden" name="alignment" value="{{thePassedValue}}" />
<button class="btn btn-large btn-info" >Go to third page</button>
</form>
{% endif %}
</div>