Develop Reference

How to use Flask-Moment with dynamically generated HTML?

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>

django: adding a form to formset in template causing issues

I know this kind of question are recurrent here and I have searched around for hours for an answer but nothing this seems to solve the issue.
I have a formset where the user can dynamically add a form. The formset works well when there is only form, but when the user adds a form, this newly added form does not get saved in the database table which lead me to think that there is an issue with the adding button. My limited skills in programming and especially Javascript prevent me from going further in understanding what is going on
here is my view:
def New_Sales(request):
#context = {}
form = modelformset_factory(historical_recent_data, fields=('Id', 'Date','Quantity', 'NetAmount'))
if request.method == 'GET':
formset = form(queryset= historical_recent_data.objects.none())
elif request.method == 'POST':
formset = form(request.POST)
if formset.is_valid():
for check_form in formset:
quantity = check_form.cleaned_data.get('Quantity')
id = check_form.cleaned_data.get('Id')
update = replenishment.objects.filter(Id = id).update(StockOnHand = F('StockOnHand') - quantity)
update2 = Item2.objects.filter(reference = id).update(stock_reel = F('stock_reel') - quantity)
check_form.save()
return redirect('/dash2.html')
#else:
#form = form(queryset= historical_recent_data.objects.none())
return render(request, 'new_sale.html', {'formset':formset})
and here is the template:
<form method="POST" class="form-validate" id="form_set">
{% csrf_token %}
{{ formset.management_form }}
<table id="form_set" class="form">
{% for form in formset.forms %}
{{form.non_field_errors}}
{{form.errors}}
<table class='no_error'>
{% crispy form %}
</table>
{% endfor %}
</table>
<div id="form_set" style="display:none">
<table class='no_error'>
{% crispy formset.empty_form %}
</table>
</div>
</div>
<br>
<br>
</form>
<button class="btn btn-success" id="add_more">Add</button>
<button class="btn btn-primary" type="submit" form="form_set">Save</button>
</section>
</div>
</div>
<footer class="footer">
<div class="footer__block block no-margin-bottom">
<div class="container-fluid text-center">
<div class ="row text-center">
<div class="col-lg-3">
<form id= "form_{{ language.code }}" action="{% url 'set_language' %}" method="post">{% csrf_token %}
<input type="hidden" name="text" value="{{ redirect_to }}">
<select name="language" id="">
{% get_available_languages as LANGUAGES %}
{% get_language_info_list for LANGUAGES as languages %}
{% for language in languages %}
<option value="{{ language.code }}" {% if language.code == LANGUAGE_CODE %} selected {% endif %}>
{{ language.name_local }} ({{ language.code }})
</option>
{% endfor %}
</select>
<button type="submit" value="Go" class="learn_more2">Go</button>
</form>
</div>
<div class="col-lg-3">
<p class="no-margin-bottom align-items-center" >2020 © Exostock.<a></a></p>
</div>
<div class="col-lg-3">
<span>Support</span>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- JavaScript files-->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/popper.js/umd/popper.min.js' %}"> </script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'vendor/jquery.cookie/jquery.cookie.js' %}"> </script>
<script src="{% static 'vendor/chart.js/Chart.min.js' %}"></script>
<script src="{% static 'vendor/jquery-validation/jquery.validate.min.js' %}"></script>
<script src="{% static 'js/charts-home.js' %}"></script>
<script src="{% static 'js/front.js' %}"></script>
</body>
</html>
<script type='text/javascript'>
$('#add_more').click(function() {
var form_idx = $('#id_form-TOTAL_FORMS').val();
$('#form_set').append($('#form_set').html().replace(/__prefix__/g, form_idx));
$('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
</script>
There is no error outputed, neither on screen or in the logs, but I am sure something is wrong with the form that get created because only the original one gets into db

I want to show stars based on an array element that is passed as a parameter to my template

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

Jquery Countdown Plugin Not Working

I am using JQuery's countdown plugin in my Django application. I set up the countdown init script in a JQuery document.ready callback function, and I can see the javascript load when I check the network tab in Chrome's web inspector, but the plugin doesn't show up. I logged the element to the web console to make sure that it existed when I tried to call JQuery.countdown's .countDown method that kickstarts the plugin. It does in fact exist, but there is just empty space in between the tags. There are also no errors in the console.
Scripts "both JQuery and JQuery countdown being loaded"
<!-- SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/static/js/menu.js"></script>
<script type='text/javascript' src="/static/js/user_actions.js"></script>
<script type="text/javascript" src="/static/js/jquery.countdown/jquery.countdown.js"></script>
<!-- JQUERY Countdown -->
<script type="text/javascript">
$(document).ready(function () {
var clock = $("#countdown");
console.log(clock);
$("#countdown").countDown("2017/12/01", function (event) {
console.log("CLOCK WORKS");
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});
});
</script>
HTML
{% block content %}
<div id='billboard' class='flexslider billboards'>
<ul class='slides'>
{% for billboard in billboards %}
<li class='slide' style="background-image: url('{{ billboard.image }}');">
<div class='transparent-overlay'></div>
<div class='container'>
<div class='slide-content'>
<h1>{% inplace_edit "billboard.header" %}</h1>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="home-sub-container">
<div class="col-xs-8" style="border: 1px solid lime;">
<div id="daily-sales-tracker" style="height: 500px; background-color: lightgray; margin-bottom: 30px;"></div>
<div id="additional-plugins" style="height: 500px; background-color: lightgray;"></div>
</div>
<div class="col-xs-4 red-alerts">
<p>RED ALERTS</p>
<div class="styled-divider">
<div class="color"></div>
<div class="no-color"></div>
</div>
{% for alert in red_alerts %}
<div class="red-alert">
<div class="fa-container">
{% if alert.font_awesome_one %}
<i class="fa {{ alert.font_awesome_one }}"></i>
{% endif %}
{% if alert.font_awesome_two %}
<i class="fa {{ alert.font_awesome_two }}"></i>
{% endif %}
{% if alert.font_awesome_three %}
<i class="fa {{ alert.font_awesome_three }}"></i>
{% endif %}
</div>
<p class="alert-title">
{{ alert.title }}
</p>
<a href="{{ alert.link }}" class="alert-links">
DOWNLOAD
</a>
</div>
{% endfor %}
<div id="countdown">
</div>
</div>
</div>
<div id='sections' class='home-sections'>
{% for section in sections %}
<div class='section-wrapper {% cycle "white" "dark" %}'>
<div class='container'>
<div class='row'>
{% inplace_edit 'section.content|safe' adaptor='tiny' %}
<div class='clear-both'></div>
</div>
</div>
</div>
{% endfor %}
<div class='clear-both'></div>
</div>
{% endblock %}

Include template with dynamic Django form

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.