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.
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 would like to make easy math in my currency Django project but I got response in google chrome inspect that one object (that which comes from API JSON response) is undefined but second is a String
When I change code a little bit to this below I got response in console inspect
And I can see clearly this object is there but I can't get it out of class .value
console.log(amount1, amount2);
<p id="crypto-price">3289.00221916 </p> <option id="user-wallet">15000 </option>
static/js/javascript.js
const amount1 = document.getElementById("crypto-price");
const amount2 = document.getElementById("user-wallet");
function calculate() {
console.log("YESS");
**console.log(parseInt(amount1.value) * parseInt(amount2.value));**
console.log(typeof amount1.value, typeof amount2.value);
}
calculate();
YESS
javascripts.js:13 NaN
javascripts.js:14 undefined string
Django templates where are both objects "crypto-price" "user-wallet" comes from the for loop
{% extends "web/layout.html" %}
{% block body %}
<div class="row">
{% for crypto_detail in crypto_detail_view %}
<div class="col-lg-12 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<img class="rounded mx-auto d-block" src="{{crypto_detail.logo_url}}" width="50" height="50">
<h4 class="card-title text-center" id="crypto-name">{{ crypto_detail.name }} </h4>
</div>
<div class="card-footer text-center">
<p id="crypto-price" >{{crypto_detail.price}} </p>
<p>{{fiat_currency}}</p>
</div>
<div class="card-footer text-center" >
<p href="">Price Date: {{ crypto_detail.price_date }}</p>
</div>
</div>
</div>
{% endfor %}
<div class="row g-3 align-items-center">
<p>Your Money:</p>
<select class="form-select" aria-label="Default select example">
<option selected>which currency do you want to buy Crypto for?</option>
{% for money_purchased in user_purchased_currencies %}
<p id="currency-name">{{money_purchased.currency}}</p>
<option id="user-wallet">{{money_purchased.currency_amount}} </option>
{% endfor %}
</select>
<form method="post" >
{% csrf_token %}
<div class="form-group">
<p>{{ form.wallet_amount }}</p>
<input type="text" value="{{crypto_name}}" />
</div>
<input class="btn btn-primary" type="submit" value="Buy">
</form>
</div>
</div>
{% block js_block %}
<script src="/static/js/javascripts.js" ></script>
{% endblock %}
{% endblock %}
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>
So I was trying to loop over an array element which id {{doctor.16}} but I couldn't so I thought I could make it as if conditions but I failed to do this too so can anyone please help me?
this is what I have done so far
<div class="row">
<div class="col-lg-12">
<div class="single_jobs white-bg d-flex justify-content-between" style="width: 50px">
<div class="single_candidates text-center">
{% for doctor in recdoc %}
<div class="thumb">
<img class="img-circle " src="{% static 'static_file/img/candiateds/2.png' %}" alt="" >
</div>
<a href="" ><h4 >{{doctor.6}} {{doctor.7}}</h4></a>
<p> {{doctor.9}}</p>
<div class="best-rating">
<div class="text-warning">
{% if{{doctor.16}} == 1 %}
<i class="fa fa-star"></i>
{% endif %}
</div>
<div class="best-rating" >
<h5>تقييم الدكتور</h5>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
what I can't do correctly is this part
{% if{{doctor.16}} == 1 %}
<i class="fa fa-star"></i>
{% endif %}
Since you are not rendering the variable within {% if %} tag.
The part you did wrong should be:
{% if doctor.16 == 1 %}
<i class="fa fa-star"></i>
{% endif %}
See the following official documentation for more details of django templates:
https://docs.djangoproject.com/en/3.0/topics/templates/#syntax
I have a model with a choices field, and the creation form has different fields depending on the field. I'm implementing the design of a dashboard in which the user can click a button (one button for each choice) and a model containing the model form will be displayed.
I want to use a template only for the model and send the form and action URL to it depending on which button the user clicks, but that would mean I have to mix JS and Django variables and I don't know if that's a good idea.
The code right now is something like this:
dashboard.html
<div class="add-connections">
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.EP %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.OLX %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.CC %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if user_connections.FR %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
</div>
{% url 'create_olx_connection' as olx_url %}
{% url 'create_ep_connection' as ep_url %}
{% url 'create_cc_connection' as cc_url %}
{% url 'create_fr_connection' as fr_url %}
{% include "properties/dashboard/connection_modal.html" %}
connection_modal.html
<!-- Modal -->
<div class="modal fade modal-property" id="modal-new-connection" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
<div class="modal-dialog" role="document">
<div class="modal-content panel-success">
<div class="modal-header panel-heading">
<button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title text-uppercase text-white"><b>Connections</b></h4>
</div>
<div class="modal-body">
<form action="{{ action_url }}"
{{ form.as_p }}
<div>
<button type="submit" class="btn btn-outline-success">Activate connection</button>
Cancel
</div>
</form>
</div>
</div>
</div>
</div>
views.py
def get_context_data(self, **kwargs):
context = super(
ManageServicesView, self).get_context_data(**kwargs)
...
context['connection_forms'] = {
'olx_form': OLXform(),
'el_pais_form': ElPaisForm(),
'finca_raiz_form': FincaRaizForm(),
'calicasa_form': CaliCasaForm()
}
return context
I want something like {% include "properties/dashboard/connection_modal.html" with form=chosen_form and action_url=chosen_url %} but I don't know how to link each button's click event with Django variables to be able to do that. I don't want to code a model for each option, I think it has to be a cleaner way. I'd appreciate your suggestions.
You could put a {% for ... %} loop in connection_modal.html to generate all the modals, with the correct forms, that you need. Than put a another for loop in dashboard.html to create the correct links.
Tweaking views.py:
context['connections'] = {
'OLX': {
'form' : OLXform(),
'user_connected': user_connections.OLX
},
'EP': {
'form' : ElPaisForm(),
'user_connected': user_connections.EP
},
# other connections here
}
dashboard.html:
{% for connection,data in user_connected.items %}
<div class="col-sm-3 text-center" >
<div class="connection-box">
{% if data.user_connected %}
<img src="{% static 'images/green-check-mark.png' %}" alt="Connection added" class="check">
{% else %}
Activate
{% endif %}
</div>
</div>
{% endfor %}
connection_modal.html:
{% for connection,data in user_connected.items %}
{% if not data.connected %}
<!-- Modal for {{connection}} -->
<div id="modal-new-connection-{{connection}}" class="modal fade modal-property" tabindex="-1" role="dialog" aria-labelledby="myConnectionModal">
<!-- modal code before form -->
{{ data.form }}
<!-- modal code after form -->
</div>
{% endif %}
{% endfor %}
This should create as many modals as you need, each with their own id value, that can be called from the appropriate link. For example modal id "modal-new-connection-OLX" will be created with the OLX form and be called from the OLX link.