I'm making a website with flask, and I pass in a list. My .html file has this code:
{$ for file in list %}
<div>
<img ... > </img>
</div>
{% endfor %}
Now if list.length == 0 I want it to just do something like
<h2> Error </h2>
instead. How do I make an if statement to check if the list is empty, and if it is then I print error on the website, if it is not, I print the images in the list. I tried to put:
<script>
if(list.length==0){
<h2>Error</h2>
}
else{
"the for loop stuff"
}
</script>
but this does not work.
THanks
In Flask with Jinja2 as a template engine, the if-else syntax requires you to write the following statement
{% if mylist.length == 0 %}
<div>error</div>
{% else %}
<!-- loop -->
{% endif %}
Note: Since list is a Python keyword i suggest you to use another name for your list in order to avoid possible conflicts.
In this pythonprogramming page about flask 7, you will find some example code and a video. The example shows an if-else statement:
{% for post in posts %}
<h3> {{ post.title }}</h3>
<p>{{ post.body }}</p>
{% if author %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.author }} </span>
{% endif %}
{% if date %}
<span style="font-size:0.5em;color:yellowgreen">{{ post.date }}</span>
{% endif %}
{% endfor %}
I decided to post my answer to share this learning resource because I have noted that the example does not use any <script> tag (not sure if it helps).
The comparison operator is almost the same everywhere as you can see in both the Python and Jinja references.
Therefore, the equivalent for your code would be:
{% if list.length == 0 %}
...
{% endif %}
Related
The code is written in Django-Python. The project is created using the models in Django and shown in navigation as dropdown menu.
The drop-down menu is shown using the Django-HTML as shown in following way:
This code works well for dropdown menu. but I want to open the different project url based on click.
I am not sure exactly how to assign id and use javascript to code do onclick bsed html loading !!
I have tried some javascript code, but I am novice.. so If I put here.. it would be more confusing.
<div class="dropdown-menu" id="navbarDropdown">
{% if project_records %}
{% for p in project_records %}
{{ p.pName }}
{% endfor %}
{% endif %}
</div>
I expect that projectB.html will be loaded if click projectB in dropdown menu in navigation bar.
Add the href attribute in anchor tag appropriately. Assuming http://someurl/ is the prefix and the project name is the suffix of your project URLs, you may form the target URL in a variable and use it. Here is your modified code:
<div class="dropdown-menu" id="navbarDropdown">
{% if project_records %}
{% for p in project_records %}
{% with project_url="http://someurl"|add:p.pName %}
{{ p.pName }}
{% endfor %}
{% endif %}
</div>
When the first page is loaded, I want the user to come across all the music, but if he selects a list from RadioButton, I only want the music in that list, but the javascript function doesn't work.
Let me add that I don't normally know JavaScript, but I need to use it.
<div style = "margin-top : 100px;"class = "container">
{% for table in tables %}
<input type="radio" name="list1" onclick="mL('{{table}}')"> {{table}}
{% endfor %}
<div align="center">
<audio class="my_audio" controls="controls" autoplay="autoplay" style="width:500px;"></audio>
<ul>
{% for table in tables %}
{% for music in musics %}
<li style="list-style-type:None">
<a id="{{table}}" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
</li>
{% endfor %}
{% endfor %}
{% for music in musics %}
<li style="list-style-type:None">
<a id="default" href="javascript:void(0);" onclick="playSong('{{music}}')">{{music}}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<script> function mL(x)
{
{% for table in tables %}
if (x=={{table}})
document.getElementById("{{table}}").style.display="block";
document.getElementById("default").style.display="none";
{% endfor %}
else
document.getElementById("{{table}}").style.display="none";
document.getElementById("default").style.display="block";
return;
}
</script>
This isn't a Django issue, it's purely about the JavaScript (or should be).
Here are some problems with your code:
In HTML, the id attribute should be unique in the document. You seem to have many <a> tags with the same id. Use the class attribute, or even better use your own data attribute like data-table.
You can code generate JavaScript using Django template tags like you have, but I think it's a bad idea because it's very hard to reason about how the code will work. Don't use {% for %} inside the <script> block.
JavaScript doesn't use spaces for code blocks like Python does. You need to use braces { } instead.
Once those things are fixed, use the debugging console in your browser (F12 in Firefox and Chrome). It will let you see any syntax errors, and you can even run code in the console to see how things like document.getElementById work.
I want to show a JavaScript alert box when there is an error during login (wrong password or username), and reload the page. How can I do this from the Django template?
This is along the lines of what I had in mind:
[% if messages %}
<div class="javascript:alert">
{{ somemessage }}
</div>
{% endif %}
Put your alert call inside a script tag like this:
[% if messages %}
<script>
alert({{ somemessage }})
</script>
{% endif %}
I am trying to show blog posts on product pages by matching their tags. I have this code, but the problem is it's fetching only the latest 50 posts. How can I loop through all articles?
{% for article in blogs.news.articles %}
{% for tag in product.tags %}
{% if article.tags contains tag %}
{{ article.title }}
{% endif %}
{% endfor %}
{% endfor %}
Shopify have a limit of 50 items per loop for collections and blogs. This means that you can't go outside those limitations.
This limitation is set in order to keep the requests to their server as small as possible.
So the short answer is that you can't loop more than 50 articles or products.
I would like to share a template between AJAX and regualr HTTP calls, the only difference is that one template needs to extend base.html html, while the other dose not.
I can use
{% extends request.is_ajax|yesno:"app/base_ajax.html,app/base.html" %}
To dynamically decide when to extend, but I also need to include {% block 'some_div' %}{% endbock %} tags to tell the renderer where to put my content. The ajax call needs those tags to be left out because jQuery tells it where to put the content with $('somediv').html(response).
Any idea on how to dynamically include those block tags when its not an ajax call?
I've been referencing this question to figure it out:
Any way to make {% extends '...' %} conditional? - Django
Attempt to make it work through an {% if %}:
{% extends request.is_ajax|yesno:",stamped/home.html" %}
{% if request.is_ajax == False%}
{% block results %}
{% endif %}
{% load stamped_custom_tags %}
...
Content
...
{% if request.is_ajax == False%}
{% endblock %}
{% endif %}
but this fails when parser runs into the {% endif %}
Wouldn't this, or some variant, do?
{% if request.is_ajax %}
{# ajax! #}
{% else %}
{% block 'some_div' %}{% endbock %}
{% endif %}
My Solution:
{% extends x|yesno:"stamped/blank.html,stamped/home.html" %}
Where blank.html contains:
{% block results %}{% endblock %}
<!-- to allow for corrected shared rendering
with ajax posts and normal django rendering -->
and home.html is my standard app page with a results block to extend.