I have an html file which I am rendering with jinja2 in python, which has some div sections like
<div id="imdb">
{{imdb_output}}
</div>
Now even when the value of imdb_output variable is returned None from its function in python file, as expected HTML still displays the div section although with no content, but with its css!
But what do I need to do so that even the empty div section does not appear if imdb_output has no values to display?? Do I need to add some JS?
Please help!
Here is a screenshot of the problem:-
http://imgur.com/qVfk2
use this
{% if imdb_output %}
<div id="imdb">
{{imdb_output}}
</div>
{% endif %}
You should read jinja2 documentation for template designers
Just check if imdb_output is empty:
{% if imdb_output %}
<div id="imdb">
{{imdb_output}}
</div>
{% endif %}
Related
I'm very new to python and django framework. I'm facing a minor issue of not being able to assign a variable to my for loop.
In my html file there are buttons and a list (rendered using a loop).
for ex:
Buttons
<li><a class="layer-item" href="#" onclick="selectLayer('base')" title="Base layer">Base layer</a></li>
<li><a class="layer-item" href="#" onclick="selectLayer('soil')" title="Soil layers">Soil layers</a></li>
Inside script tags i'm updating the variable value as
<script>
var layerType = "";
function selectLayer(layer){
layerType = layer;
}
</script>
Also i have a loop like following in the same html file
{% for layer in base %}
<div class="col-4">
<span class="base-layer-title d-block">{{layer.title}}</span>
</div>
{% endfor %}
Here i want to replace base according the button clicked.
For ex:
<a class="layer-item" href="#" onclick="selectLayer('soil')" title="Soil layers">Soil layers</a>
Clicking on the above button should make the for loop as
{% for layer in soil %}
<div class="col-4">
<span class="base-layer-title d-block">{{layer.title}}</span>
</div>
{% endfor %}
From i read you can do something like this to assign a value to a variable.
{% with name="World" %} But not sure how to implement it in my issue.
Any help is appreciated
Also i have a loop like following in the same html file
{% for layer in base %}
{{layer.title}} {% endfor %}
Here i want to replace base according the button clicked.
In short, Django is a server-side framework and it cannot directly respond to any client-side activity. You cannot do it effectively without client-side libraries like React, JQuery, etc.
Workaround 1
You can make a new request to the server on click and re-render the entire page with new parameters.
urls.py
path('my_pattern/<slug:my_layer>', myview)
views.py
def myView(request, my_layer):
# your logics
base = get_layer_data(my_layer) # <-- logic to get list dynamically
return render(request, 'my_template.html', context={'base':base})
my_template.html
{% for layer in base %}
<div class="col-4">
<span class="base-layer-title d-block">{{layer.title}}</span>
</div>
{% endfor %}
...
<a class="layer-item" href="/my_pattern/soil" title="Soil layers">Soil layers</a>
<a class="layer-item" href="/my_pattern/some_other_layer" title="Some other layers">Soil layers</a>
...
The base will have dynamically generated data on every request.
Workaround 2
You can, however, render all the data on the page and control it using collapse in bootstrap https://getbootstrap.com/docs/4.5/components/collapse/
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 am trying to use the bootstrap carousel, but cannot really get it to work. I have a list with pictures I want to loop through and show in the carousel. I cannot show all the pictures since the "activate" (line 3 in the text below) only should be applied for the first picture (and not for the other ones in the list). This mean that I need some kind of restriction regarding the "activate". Probably something like "only use activate for the first loop-through". I'm not quite sure how to write that. I'm writing in javascript (newbie) and having a really hard time incorporating it in the html file.
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active">
<img src="{{ url_for('static', filename='images/' + image.image) }}" alt="{{ name }} product image" class="d-block w-100">
</div>
{% endfor %}
</div>
You are using some template language here, I think Django.
You need to put class active in if block.
{% if image in images is first %} active {% endif %}
{% with %} {% endwith %}
I think you can use with syntax. This example is just logic you need to follow.
Just find the correct syntax. Other you do not need to change.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I am iterating over my model and I wanted to replace that list with content from same model, only sorted, just by using a button. Let's presume I have this:
<div class="col-md-3">
<button>Replace content </button>
</div
<div class="col-md-9">
{% for c in cats%}
{{c.name}}
{% endfor %}
<p>Content to be replaced</p>
</div>
<div class="col-md-9">
{% for c in animal.cats_set.all %}
{{c.name}}
{% endfor %}
<p>Content to replace above content, sorted by if cat belongs to same animal</p>
</div>
How would I replace the content with the second content in this case ? Im thinking about a jQuery.
I'm going to throw out a warning first: deciding on whether you want the data changed by the Django template player or JQuery are two very different things.
Django will change the data on the server, while JQuery is used to change rendered data (usually after the page has already been displayed to the user).
Going the Django Route:
Django is only a template player, so you cannot change it after it has been rendered. It is not a functional language which can continually interact with a rendered page.
You can, however, use the template syntax to put logic in place to decide where data will go or use a structure such as the Django Blocks:
{% block blockName %}
...
{% endblock %}
When I'm writing a complex template I often find myself using this structure:
{% extends "path/ParentFile.html" %}
{% block content %}
{% include "path/ToDefaultChildFile.html" %}
{% endblock %}
If you're ok with the page rendering and then changing it with JQuery once the page is loaded then you'll want to look into the JQuery/JavaScript/frontend framework code to do so.
Use the jQuery .replaceWith() function. Like:
<div class="col-md-3">
<button>Replace content </button>
</div
<div class="col-md-9 old">
{% for c in cats%}
{{c.name}}
{% endfor %}
<p>Content to be replaced</p>
</div>
<div class="col-md-9 new">
{% for c in animal.cats_set.all %}
{{c.name}}
{% endfor %}
<p>Content to replace above content, sorted by if cat belongs to same animal</p>
</div>
Your jQuery function will be:
$(function() {
$(":button").click(function(e) {
$(".old").replaceWith($(".new"));
});
});