I am using Django. In my template i am using for loop but i don't need to print the same date which is already printed. so my code is-
{% for applicant in applicants %}
<div class="row">
<div class="col-xs-12">
<div class="col-xs-12 col-sm-12 col-md-2">
<div class="col-xs-12 application_slot_list">
<h5>{{ applicant.created_on|date }}</h5>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-10 candidate_list_application">
<div class="row">
<div class="col-xs-12 list-title">
<h4>{{ applicant.employee }}<small class="pull-right"><button class="btn btn-link">Download CV</button></small></h4>
</div>
So here i am trying to print two things, employee and date but i don't want to print repeated date. So is there any way to do this. I want to do this only in template not in views.
Use the {% ifchanged %} tag:
Check if a value has changed from the last iteration of a loop.
{% for applicant in applicants %}
<div class="row">
<div class="col-xs-12">
{% ifchanged %}
<div class="col-xs-12 col-sm-12 col-md-2">
<div class="col-xs-12 application_slot_list">
<h5>{{ applicant.created_on|date }}</h5>
</div>
</div>
{% endifchanged %}
<div class="col-xs-12 col-sm-12 col-md-10 candidate_list_application">
<div class="row">
<div class="col-xs-12 list-title">
<h4>{{ applicant.employee }}<small class="pull-right"><button class="btn btn-link">Download CV</button></small></h4>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
Related
I am creating a printing ordering service website in Django and I am stuck on the order page.
I have three tables named "product" ,"size", and "sizeProductMap" table.
views.py
products = Product.objects.get(prod_ID=id)
print(products.prod_Name)
sizesmap = SizeProductMapping.objects.filter(prod_id=id)
sizeslist = []
for data in sizesmap:
sizes = data.size_id
sizeslist.append(sizes.prod_size) # Here I am getting all the sizes I needed.
print(sizes.prod_size)
return render(request, "GalaxyOffset/product.html", {'products': products, 'sizeslist': sizeslist})
product.html
{% extends 'GalaxyOffset\basic.html' %}
{% block title%}Products{% endblock %}
{% block body%}
<div class="card my-2 mx-0 auto">
<div class="mx-4 my-2">
<h1>{{ products.prod_Name }}</h1>
</div>
<div class="row">
<div class="col-3">
<img class="border border-secondary my-4 mx-4" height="200"
src="{{products.prod_img.url}}"
width="200"/>
</div>
<div class="col-8 my-4">
<p> {{products.prod_Desc}}</p>
</div>
<div class="dropdown-divider"></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card mx-2 my-2 border border-secondary">
<div class="mx-2 mt-4">
{% for category in categories %}
<a id="{{ category.prod_ID }}" class="dropdown-item" href="{% url 'product' category.prod_ID%}">
{{ category.prod_ID }}. {{ category.prod_Name }}</a>
<div class="dropdown-divider"></div>
{% endfor %}
</div>
</div>
</div>
<div class="col-8">
<div class="card mx-2 my-2">
<div class="my-2">
<!-- How can I reduce Number of Line of code here. -->
{% for s in sizeslist %}
<input type="radio" name="sizes">{{s}}
</br>
{% endfor %}
</div>
</div>
</div>
</div>
{% endblock %}
Can you help me here to reduce the Numer of Lines in my views.py for fetching sizes and displaying in product.html?
You can use a list comprehension here.
sizesmap = SizeProductMapping.objects.filter(prod_id=id)
sizeslist = [data.size_id.prod_size for data in sizesmap]
or use .values()
Ex:
sizeslist = SizeProductMapping.objects.filter(prod_id=id).values('size_id__prod_size')
I am making a django app. This is my index.html template:
{% extends "blog/base.html" %}
{% block content %}
{% if latest_post %}
<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">
{{ latest_post.title }}
</h1>
<p class="lead my-3">
{{ latest_post.body|truncatewords:30 }}
</p>
<p class="lead mb-0">
Continue reading...
</p>
</div>
</div>
{% endif %}
{% for post in posts %}
<div class="row mb-2">
<div class="col-md-6">
<div
class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative"
>
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">{{ post.title }}</h3>
<div class="mb-1 text-muted">{{ post.date_posted }}</div>
<p class="mb-auto">
{{ post.body|truncatewords:30 }}
</p>
Continue reading
{% endfor %}
{% endblock %}
However, I am getting this error:
django.template.exceptions.TemplateSyntaxError: Unclosed tag on line 2: 'block'. Looking for one of: endblock. in django
I have made sure:
All the blocks are closed
There is no whitespaces between the percent signs and the block names
I am not missing any percent signs
Please help me
Inside for loop you have four opened <div> element after closing those it seems ok.
{% for post in posts %}
<div class="row mb-2">
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">{{ post.title }}</h3>
<div class="mb-1 text-muted">{{ post.date_posted }}</div>
<p class="mb-auto">
{{ post.body|truncatewords:30 }}
</p>
Continue reading
</div></div></div></div>
{% endfor %}
This is ultimately just one box. But since it has the 'for' loop, it should have 3 boxes horizontally aligned.
<div class="album py-5 bg-light">
<div class="container">
{% for hobby in hobbies.all %}
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="{{ hobby.image.url }}"/>
<div class="card-body">
<p class="card-text">{{ hobby.summary }}</p>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
I keep having this:
What will I do?
Here you go with a solution
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
{% for hobby in hobbies.all %}
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img class="card-img-top" src="{{ hobby.image.url }}" />
<div class="card-body">
<p class="card-text">{{ hobby.summary }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
You class="row" should be outside the loop.
class="row" creates row in a table format that means each item within a loop will create a row and then a column inside i.e. you see your each cards in new row.
For getting the cards horizontally, all the cards should be place within a single row.
I have a form setup that is able to edit products inside of my database. What I would like to do is have the input fields be populated with the information of the product that a user is trying to edit, instead of having to manually enter in ALL the information (basically being able to highlight the information) I am using Flask along with Jinja2 and WTForms.
Here is my code for the form:
{% extends 'navbar.html' %}
{% block container %}
<link rel="stylesheet" href="{{url_for('static', filename='css/product-edit.css') }}">
<div class="top-pad" style="text-align: center;">
<div class="well">
<div class="row" id="product-form">
<h2 class="col-md-6" style="color: blue">Edit Product</h2>
</div>
<form method="POST" action="{{ url_for('my_view.product_edit', key=category_id) }}" role="form" id="product-form">
<div class="row">
<div class="form-group col-md-6">{{ form.brand.label }}: {{ form.brand() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.name.label }}: {{ form.name() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.price.label }}: {{ form.price() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.rating.label }}: {{ form.rating() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<!-- Category Dropdown -->
<label for="category col-md-6" id="category-select">Categories: </label>
<select name="category" id="category">
{% for category in categories %}
<option value="{{ category[0] }}">{{ category[1] }}</option>
{% endfor %}
</select>
<!-- END Category Dropdown -->
</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.year.label }}: {{ form.year() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.stock.label }}: {{form.stock() }}</div>
</div>
<div class="row">
<div class="form-group col-md-6">{{ form.image.label }}: {{ form.image() }}</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
I'm not even sure I am stating my question properly, please let me know if I need to clarify more. I will try my best.
I'm trying to sort the panels onto that way:
image screen - please enter to see:
But I've got more than 6 columns (it's 9). I'm looking forward to set 4 on the LEFT, 4 on the RIGHT and 1 in CONTENT.
My code is:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w kórych jesteś zawodnikiem:</div>
<div class="panel-body">
<ul>
{% for playerT in playersT %}
<li>{{playerT.tournament_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4 ">
<div class="panel panel-primary">
<div class="panel-heading">Turnieje, w których jesteś trenerem:</div>
<div class="panel-body">
<ul>
{% for tournament in ctournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje turnieje:</div>
<div class="panel-body">
<ul>
{% for tournament in mtournaments %}
<li>{{tournament.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Twoje drużyny:</div>
<div class="panel-body">
<ul>
{% for team in teams %}
<li>{{team.name}}</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenie do drużyny:</div>
<div class="panel-body">
<ul>
{% if playerteam %}
<li>{{ playerteam.team_id.name }} <a href="{% url 'playerToTeamAccept' playerteam.id %}">
Akceptuj </a></li>
{% endif%}
</ul>
</div>
<div class="panel-footer">Przeglądaj wszystkie</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia dla Twoich zawodników do turnieju:</div>
<div class="panel-body">
<ul>
{% for player in AplayersT %}
<li>{{ player.tournament_id.name }} <a href="{% url 'playerToTournamentAccept' player.id %}">
Akceptuj </a></li>
{% endfor%}
</ul>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByC' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zgłoszenia zawodników do Twoich turniejów:</div>
<div class="panel-body">
<table class="table table-hover table-condensed">
<br>
{% for EplayerT in EplayersT %}
<tr>
<td class="col-md-3" align="center"><a
href="{% url 'allTeamTourAcceptByM' EplayerT.player_id.team_id.id %}"> Akceptuj
drużynę {{ EplayerT.player_id.team_id.name }} </a></td>
<td class="col-md-3">Zawodnik {{ EplayerT.player_id.name }} {{ EplayerT.player_id.surname }}
zgłoszony do {{ EplayerT.tournament_id.name }}
</td>
<td class="col-md-3" align="center"> Akceptuj zawodnika</td>
</tr>
{% endfor %}
</table>
</div>
<div class="panel-footer"><a href="{% url 'allPlayersTourAcceptByM' %}" class="btn btn-default">Akceptuj
wszystkie</a></div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Przynależność do drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
<div class="col-md-push-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Zaproszenia do Twojej drużyny:</div>
<div class="panel-body">
<ul>
{% for player in players %}
<li>{{player.team_id.name}}
</li>
{% endfor %}
</ul>
</div>
<div class="panel-footer">Pozostałe drużyny
</div>
</div>
</div>
</div>
But now it looks:
image screen - please enter to see:
Does anyone has an idea how to sort it ? Thanks for each solution!
Are you looking for a layout like this? In that case I would suggest you to create three columns and simply put four panels inside the left and right column. Also has the advantage that the top of panel 2 isn't dependent on the bottom of panel 6.
.box {
font-family: Arial;
font-size: 24px;
border: 1px solid #f99;
background-color: #fee;
color: #333;
padding: 10px;
height: 75px;
margin-bottom: 10px;
}
.box.box--100 {
height: 100px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="box">1</div>
<div class="box box--100">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<div class="col-xs-4">
<div class="box">5</div>
</div>
<div class="col-xs-4">
<div class="box box--100">6</div>
<div class="box">7</div>
<div class="box box--100">8</div>
<div class="box box--100">9</div>
</div>
</div>
</div>