I have a html like this:
<div class="row">
{% if show_name %}
<div class="columns large-4">
<label>Name</label>
<p>{{ object.name }}</p>
</div>
{% endif %}
{%if show_email %}
<div class="columns large-4 large-text-right">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
</div>
This works correctly when both the columns are to be shown. But if I should only the second column then this is right aligned in the first column because of large-text-right class. If there was only one row then I can use if else condition inside the div itself.
But there are a lot of such rows with different conditions. Is there any way where I can implement the logic once and use it on all rows?
I am using jquery in other parts of the project. So if there is any jquery solution then that is also fine.
EDIT 1
If show_name is false, then I want the code to be:
<div class="row">
{%if show_email %}
<div class="columns large-4">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
So that email is left aligned in the first column of the same row if the previous field in the first column is not present.
These fields might be put into some other row for example:
<div class="row">
{% if show_name %}
<div class="columns large-4">
<label>Name</label>
<p>{{ object.name }}</p>
</div>
{% endif %}
</div>
<div class="row">
{% if show_fullname %}
<div class="columns large-4">
<label>Full Name</label>
<p>{{ object.full_name }}</p>
</div>
{% endif %}
{%if show_email %}
<div class="columns large-4 large-text-right">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
</div>
Now here in the second part the email field should be left aligned in the first column of the second row only when show_fullname is false.
Basically for every div that has a class large-text-right, I should check if it has an element present before it in the same row and if not then that class should be removed.
I am not sure that i fully understand you problem, but have you tried something like this?
ex: <div class="columns large-4 {% if show_name %}large-text-right {% endif %}">
If I understand your issue correctly you don't want the email to be right aligned if the name is not present. In which case you need to wrap the large-text-right css class in a conditional statement that checks for show_name.
<div class="row">
{% if show_name %}
<div class="columns large-4">
<label>Name</label>
<p>{{ object.name }}</p>
</div>
{% endif %}
{%if show_email %}
<div class="columns large-4 {% if show_name %}large-text-right{% endif %}">
<label>Email</label>
<p>{{ object.email }}</p>
</div>
{% endif %}
</div>
Related
I have API that generates table that uses Flask-Moment. API returns HTML code and then it's displayed on the page, but column that uses Flask-Moment is empty. I think it's somehow connected with the fact that Flask-Moment can't (probably) work with dynamically generated HTML.
So, how to use Flask-Moment with dynamically generated HTML?
Table screenshot
responses/submissions.html:
<div class="submissions_table">
<div class="table_header__wrapper">
<div class="table_header">
{# Result #}
<div class="table_header_column result">
<p>RESULT</p>
</div>
{# Language #}
<div class="table_header_column language">
<p>LANGUAGE</p>
</div>
{# Time #}
<div class="table_header_column time">
<p>TIME</p>
</div>
{# View result #}
<div class="table_header_column view_result"></div>
</div>
</div>
<div class="table_body">
{% for submission in submissions %}
<div class="table_row__wrapper">
<div class="table_row">
{# Result #}
{% set submission_result = submission.get_result() %}
{% if submission_result['success'] %}
{% set result_status = 'success' %}
{% else %}
{% set result_status = 'fail' %}
{% endif %}
<div class="table_row_column result {{ result_status }}">
{# Status icon #}
{% if submission_result['success'] %}
<i class="result__icon far fa-check-circle"></i>
{% else %}
<i class="result__icon far fa-times-circle"></i>
{% endif %}
<p>{{ submission_result['message'] }}</p>
</div>
{# Language #}
<div class="table_row_column language">
{% set language_info = languages.get_info(submission.language) %}
<img src="{{ language_info['icon'] }}" alt="" class="language__icon">
<p class="language__name">{{ language_info['fullname'] }}</p>
</div>
{# Time #}
<div class="table_row_column time">{{ moment(submission.submission_date).fromNow() }}</div>
{# View result #}
<div class="table_row_column view_result">View Result</div>
</div>
</div>
{% endfor %}
</div>
</div>
I have a HTML template which has Multichoice Question with options and Essay type questions.
The user's answers are saved in model called Sitting in user_answers field as
sitting.user_answers =
{"424": "1527", "319": "adadadf", "203": "786", "437": "1572", "383": "1429"}
The first number is the question_id and and second is the answer_id(selected option) or answer itself (incase essay type question).
I am able to display the questions in one template using the following code:
views.py
if self.sitting.get_first_question() is False:
questions= MCQuestion.objects.filter(question_ptr_id__in=self.sitting._question_ids()).prefetch_related('answer_set__question')
essayquestions= Essay_Question.objects.filter(question_ptr_id__in=self.sitting._question_ids())
answerdetails = Sitting.objects.filter(id=self.sitting.id)
print(answerdetails)
return render(self.request, 'dashboard/exam-review.html', {'questions': questions,'essayquestions': essayquestions,'form': True})
Template
{% for question in questions %}
<div class="row mt-2 mb-4 shadow-1" style="background: #ececec">
<div class="col-md-10">
<input type=hidden name="question_id" value="{{ question.id }}" class="question_id">
<div class="panel-heading">
<p class="panel-title mb-2 mt-2" >
<li style="list-style-type: none;" class="mb-1 mt-1"><strong> {% autoescape off %}{{ question.content }}{% endautoescape %} </strong></li>
{% if question.figure %}
<div class="row mb-1">
<img src="{{ question.figure.url }}" alt="{{ question.content }}" />
</div>
{% endif %}
{% if question.questionmarks %}
<div class="row ml-1" >
<p style="font-size:0.8rem"><b>Marks :</b> {{ question.questionmarks }}</p>
</div>
{% endif %}
</div>
<div class="panel-body ">
<ul class="mb-2" style="list-style-type: none;">
{% regroup question.answer_set.all by get_content_display as answer_list %}
{% for answers in answer_list %}
<span>{{ section.grouper }}</span>
{% for answer in answers.list %}
//What to write here ???
<li class="list-group-item quiz-answers" >
<span><label for="id_answers_0"><input type="radio" name="answers_{{question.id}}" value="{{answer.id}}" style="margin-right:10px;" id="{{answer.id}}" required>
{{answer.content}} </label> </span></li>
{% endfor %}
{% endfor %}
</ul>
</div>
</div>
</div>
{% endfor %}
{% if essayquestions %}
{% for question in essayquestions %}
<div class="row mt-2 mb-4 shadow-1" style="background: #ececec">
<div class="col-md-10">
<input type=hidden name="question_id" value="{{ question.id }}" class="question_id">
<div class="panel-heading">
<p class="panel-title mb-1" >
<li style="list-style-type: none;"><strong> {% autoescape off %}{{ question.content }}{% endautoescape %} </strong></li>
<div class="row mb-1">
{% if question.figure %}
<img src="{{ question.figure.url }}" alt="{{ question.content }}" />
{% endif %}
</div>
{% if question.questionmarks %}
<div class="row mb-1" >
<p style="font-size:0.8rem"><b>Marks :</b> {{ question.questionmarks }}</p>
</div>
{% endif %}
</p>
<div class="panel-body mb-2">
<ul class="list-group mb-2" style="list-style-type: none;">
<li class="list-group-item quiz-answers mb-1">
<span><textarea name="answers" cols="40" rows="5" style="width:100%" id="answer_{{question.id}}" required>
</textarea> </span>
</li>
</ul>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
Could I use Jquery to fill the radio option using dictionary object ?
$(document).ready(function(event) {
$(".reply-btn").click(function() {
$(".section-row-reply").closest(".section-row-reply").fadeToggle();
});
});
I have a for-loop that generates the following:
comments
replies
reply form.
I want the jquery function,fadeToggle() to reveal the reply form for each comment when the reply button is clicked
<!-- jquery 2.2.4 -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- bootstrap 3.3.7 -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<!-- post comments -->
<div class="section-row">
<div class="section-title">
<h3 class="title">{{ comments.count }} Comment{{ comments|pluralize }}</h3>
</div>
<div class="post-comments">
{% for comment in comments %}
{% if comment %}
<!-- comment -->
<div class="media">
<div class="media-left">
<img class="media-object" src="{{ comment.profile_picture.url }}" alt="">
</div>
<div class="media-body">
<div class="media-heading">
<h4>{{ comment.user }}</h4>
<span class="time">{{ comment.timestamp }}</span>
</div>
<p>{{ comment.content }}</p>
<div class="rely-button">
<button type="button" name="button" class="reply-btn btn btn-outline-dark btn-sm" id="reply-button">Reply</button>
</div>
<br>
<!-- display replies to the comment -->
{# reply per comment #}
{# all replies to comments will be shown below the comment #}
{% if comment.replies %}
{% for reply in comment.replies.all %}
<div class="media-replies pull-right">
<div class="media-left">
<img class="media-object" src="{{ reply.profile_picture.url }}" alt="">
</div>
<div class="media-body">
<div class="media-heading">
<h4>{{ reply.user }}</h4>
<span class="time">{{ reply.timestamp }}</span>
</div>
<p>{{ reply.content }}</p>
</div>
</div>
{% endfor %} {# endfor comment.replies #}
{% endif %} {# endif comment.replies #}
<!-- /display replies to parent comment -->
{# after replies have been shown, we can have the reply-comment-form #}
{% if user.is_authenticated %}
<!-- post reply -->
<div class="section-row-reply pull-right" style="display:none" id="show-reply-form">
<form class="post-reply" method="post">
{% csrf_token %}
<input type="hidden" name="comment_id" value="{{ comment.id }}">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="input" name="content" placeholder="Reply here..."></textarea>
</div>
</div>
<div class="col-md-12">
<button class="primary-button" value="submit" type="submit">Reply</button>
</div>
<!-- form_errors -->
{{ comment_form.errors }}
</div>
</form>
</div>
<!-- /post reply -->
{% endif %} {# endif user.is_authenticated #}
{# comments are display in the manner above in the div section #}
</div>
</div>
{% endif %} {# endif comment #}
{% endfor %} {# endfor comment in comments #}
</div>
</div>
<!-- /post comments -->
This is a django powered site hence the {% %}, {# #} and {{ }} at the html layer. The function works but not exactly. When any reply button is clicked (to display the reply form), other reply forms for other comments are displayed.
**The idea is to make the reply button for each comment display only the reply form for that comment. Any help will be greatly appreciated. I suspect my selection of elements at the jquery layer. **
all css are that of bootstrap 3.3.7
I would like to know if it is possible to concatenate Django template, I made many attempts but none succeeded as shown below:
<script>
function seeDetail(researcher_id) {
let convert_int_researcher_id = parseInt(researcher_id)
$('#detailRearcher').empty();
let element= `
<br>
<h2> Detalhes do pesquisador selecionado </h2>
<div class="panel panel-default" id="panel">
<div class="panel-body">
<div class="col-lg-6 col-md-6 col-xs-6">
<h2>Artigos</h2>
{%for show_list_article in show_list_articles %}
{% for article in show_list_article%}
{% if article.researcher_id `+ researcher_id+`%}
{{article.researcher}}
<div class="row">
{{article.title}}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
<div class="col-lg-6 col-md-6 col-xs-6">
<h2>Projetos</h2>
{%for show_list_projeto in show_list_projetos %}
{% for project in show_list_projeto%}
<div class="row">
{{project.title}}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
`;
$('#detailRearcher').append(element)
}
but when I do this, the following error happens:
django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: '`+' from '`+'
If anyone can help me and explain why, I will be totally grateful.
Yes I saw it in the console.log and this is actually a string type value and I tried to convert it, but the same error occurs.
I am trying to make a Foundation 6 Orbit with the slides comprising of a separate/ dynamic Django template inclusion as such:
<div class="row">
<div class="small-12 columns">
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span> ◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span> ▶︎</button>
{% for p in projects %}
<li class="orbit-slide">
{% include "project/project_landing_stub.html" %}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
project_landing_stub.html:
<div class="callout small-12 columns" style="margin-top:30px;">
<a href="{{ p.get_absolute_url }}" style="color:black;">
<div class="row" style="margin-bottom: 20px;">
<div class="small-12 columns" style="border-bottom:1px solid lightgrey;">
<p>{{ p.offer_title|truncatechars:100 }}</p>
</div>
</div>
<div class="row">
<div class="small-6 columns">
<img class="thumbnail" src="{% if p.project.photo %}{{ p.project.photo.url }}{% endif %}"/>
</div>
<div class="small-6 columns">
<i class="fa fa-map-marker"></i> {{ p.project.city }}, {{ p.project.country }}
</div>
</div>
<div class="row" style="text-align: center;font-size: 12px;">
{% if p.offer_type == 'CO' %}
<div class="small-4 columns padding-10">
{% if p.annual_return %}
<b>{{ p.annual_return }}%</b><br/>
{% else %}
<b>-</b><br/>
{% endif %}
<span class="small-gray">total yield</span>
</div>
<div class="small-4 columns padding-10">
<b>{{ p.time_horizon }} </b><br/>
<span class="small-gray">tenure (mth)</span>
</div>
<div class="small-4 columns padding-10">
<p style="font-size: 12px;">
{% if p.loan %}
<b>{{ p.loan.get_payment_freq_display }}</b>
{% else %}
<b>End of Tenure</b>
{% endif %}
<br/>
<span class="small-gray">payout freq</span>
</p>
</div>
{% else %}
<div class="small-6 columns padding-10">
<b>{{ p.currency }} {{ p.min_investment }} </b><br/>
<span class="small-gray">min. investment</span>
</div>
<div class="small-6 columns padding-10">
{% if p.annual_return %}
<b>{{ p.annual_return }}%</b><br/>
{% else %}
<b>-</b><br/>
{% endif %}
<span class="small-gray">projected return</span>
</div>
{% endif %}
</div>
</a>
</div>
But it does not show, due to the orbit-container being rendered with 0px height property. Downloaded the Complete Foundation on 18th of July 2016, and using it here. The Orbit sample works fine if pasted in the same page, so I figured this has something to do with the dynamic generation of the orbit-slides using Django loop. Any idea?