We Keep Coding

Django and waypoints Infinite scroll not working

I have tried all the answers on stack and the infinite scroll is still not working. My home.html is still displaying the pagination. I suspect the problem is with jquery or the js files or with how the static file is loaded?
Here is my home.html:
{% block content %}
{% load static %}
<div class="infinite-container">
{% for post in posts %}
<div class="infinite-item">
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted|date:"F d, Y" }}</small>
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
</div>
{% endfor %}
</div>
<div class="d-flex d-none position-fixed" style="top:35vh;left:46vw">
<button class="btn btn-primary loading">
<span class="spinner-border spinner-border-sm"></span>
Please wait...
</button>
</div>
<!--pagination logic -->
<div class="col-12">
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">next</a>
{% endif %}
</div>
<script src="/static/js/jquery.waypoints.min.js"></script>
<script src="/static/js/infinite.min.js"></script>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
offset: 'bottom-in-view',
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function () {
$('.loading').hide();
}
});
</script>
{% endblock content %}
In my settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [Path(BASE_DIR, 'static'),]
The directory of my js files.
I have added the following within my base.html at the bottom.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
here is my class based view in view.py:
class PostListView(ListView):
model = Post
template_name = 'blog/home.html'
context_object_name = 'posts'
ordering = ['-date_posted']
paginate_by = 5

fadeToggle() does not respect hierarchy in HTML

I'm trying to use fadeToggle () in the comments section of my blog to open the reply form to existing comments. Initially I'm using display: none in CSS to hide both the comments list and the form. The fadeIn/Out actions should be performed by clicking on the 'Reply' link. However, when I click on reply, I go straight to the top of the page and the fade effect doesn't take effect. I reviewed the hierarchy in the html to make sure that the fadeToggle function would be redirected to the correct class, but even so, something is not correct.
html
{% for comment in comments %}
<blockquote class="blockquote">
<p>{{ comment.content }}</p>
<footer class="blockquote-footer">Por: {{ comment.user }} | {{ comment.timestamp|timesince }} ago |
{% if comment.children.count > 0 %}{{ comment.children.count }} comment{% if comment.children.count > 1 %}s
{% endif %} | {% endif %}<a class="comment-reply-btn" href="#">Reply</a>
</footer>
<div class="comment-reply">
{% for child_comment in comment.children %}
<blockquote class="blockquote">
<p class="mb-0">{{ child_comment.content }}</p>
<footer class="blockquote-footer">Por: {{ child_comment.user }} |
{{ child_comment.timestamp|timesince }}
ago
</footer>
</blockquote>
{% endfor %}
{% if request.user.is_authenticated %}
<form action="" method="POST">
{% csrf_token %}
{{ comment_form|crispy }}
<input type="hidden" name="parent_id" value="{{ comment.id }}">
<input class="btn btn-secondary" type="submit" value="Reply">
</form>
{% else %}
<p>You must login to reply</p>
{% endif %}
</div>
</blockquote>
{% endfor %}
css
.comment-reply {
display: none;
}
js
<script type="text/javascript">
$(document).ready(function () {
$(".comment-reply-btn").click(function (event) {
event.preventDefault();
$(this).parent().next(".comment-reply").fadeToggle();
})
})
</script>

Adding Django MultipleChoiceField one after the other using Javascript

I am working on a Django views based on the following form:
class MyForm(forms.Form):
def __init__(self, data, examen, *args, **kwargs):
super(MyForm, self).__init__(data, *args, **kwargs)
self.fields['q1'] = forms.MultipleChoiceField(
label=mark_safe("Label question 1"),
required=True,
widget=forms.CheckboxSelectMultiple,
choices=(('1', 'answer 1'), ('2', 'answer 2'), ('3', 'answer 3'))
)
self.fields['q2'] = forms.MultipleChoiceField(
label=mark_safe("Label question 2"),
required=True,
widget=forms.CheckboxSelectMultiple,
choices=(('1', 'answer 4'), ('2', 'answer 5'), ('3', 'answer 6'))
)
... #TODO : add questions q3 to q9
self.fields['q10'] = forms.MultipleChoiceField(
label=mark_safe("Label question 10"),
required=True,
widget=forms.CheckboxSelectMultiple,
choices=(('1', 'answer 28'), ('2', 'answer 29'), ('3', 'answer 30'))
)
Il would like to display on a single view self.fields['q1'] with a [submit] button. The idea is for the user to select the answer he considers as correct and the hit the [submit] button. Following that self.fields['q1'] will turn into read-only and self.fields['q2'] will display just below with again a [submit] button... and son on until self.fields['q10'].
I do believe that the only way to achieve that is to use Javascript (and even JQuery or any other library). The problem is that I'm not very familiar with Javascript and would gladly appreciate hints on how to tackle that issue.
Thank you for what you can do!
PS: I'm happy to change my Django design if you think this is not the proper way to achieve my goal.
EDIT 29/11/2019: my current template looks like:
<form action="{% url 'quizz' my_exam %}" method="post">
{% csrf_token %}
{% for field in form %}
{% ifequal forloop.counter0 0 %}
<div class="card text-white bg-primary mb-3">
<div class="card-body">
<h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
</div>
</div>
{% else %}
<div class="card">
<h5 class="card-header">{{field.name}}</h5>
<div class="card-body">
<h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
<p class="card-text">{{ field }}</p>
</div>
</div>
{% endifequal %}
{% endfor %}
<input type="submit" value="Submit" class="btn btn-primary"/>
</form>
EDIT 30/11/2019: new template based on #Phanti suggestions:
<script>
{% block jquery %}
$("#submit_2").click(function() {
$("#questions_container").find(":hidden").show().next();
}
{% endblock %}
</script>
{% block content %}
<form action="{% url 'quizz' exam %}" method="post">
{% csrf_token %}
<div id="questions_container">
{% for field in form %}
{% ifequal forloop.counter 1 %}
<div class="card text-white bg-primary mb-3">
<div class="card-body">
<h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
</div>
</div>
{% else %}
{% ifequal forloop.counter 2 %}
<div id="question_{{ forloop.counter }}" class="card" style="display: block;">
<h5 class="card-header">{{field.name}}</h5>
<div class="card-body">
<h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
<p class="card-text">{{ field }}</p>
</div>
</div>
<input id="submit_{{ forloop.counter }}" value="Valider" class="btn btn-primary" style="display: block;"/>
{% else %}
<div id="question_{{ forloop.counter }}" class="card" style="display: none;">
<h5 class="card-header">{{field.name}}</h5>
<div class="card-body">
<h6 class="card-title">{{ field.label|linebreaksbr }}</h6>
<p class="card-text">{{ field }}</p>
</div>
</div>
{% if not forloop.last %}
<input id="submit_{{ forloop.counter }}" value="Submit" class="btn btn-primary" style="display: none;"/>
{% else %}
<input id="submit_{{ forloop.counter }}" type="submit" value="Submit" class="btn btn-primary" style="display: none;"/>
{% endif %}
{% endifequal %}
{% endifequal %}
{% endfor %}
</div>
</form>
{% endblock %}

Long loading Javascript (modal window)

On this site http://nashedom.ru there are JS scripts. Most are fast.
The modalka fancybox pages (for login users, in user cabinet, page объявления -> добавление объявления) are very slow. In Chrome loading is 25-28 seconds. In Firefox - 2,5 seconds.
The data is taken out of context.
HTML:
{% load hosts %}
<div class="b-header">
<div class="b-header__menu">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="b-menu">
<a>...</a>
<a>...</a>
<a>...</a>
<a>...</a>
<span class="b-menu__item btn_change-location">
<a href="#change-location" class="fancybox dashed">
{% if user.is_authenticated %}
View ads on site:
{% if user.districts.all.count > 1 %}
{% for district in user.districts.all %}
{% if forloop.last %}
<span>{{ district }}</span>
{% else %}
<span>{{ district }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for district in user.districts.all %}
<span>{{ district }}</span>
{% endfor %}
{% endif %}
{% if user.regions.all.count > 1 %}
{% for region in user.regions.all %}
{% if forloop.last %}
<span>{{ region }}</span>
{% else %}
<span>{{ region }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for region in user.regions.all %}
<span>{{ region }}</span>
{% endfor %}
{% endif %}
{% if user.cities.all.count > 1 %}
{% for city in user.cities.all %}
{% if forloop.last %}
<span>{{ city }}</span>
{% else %}
<span>{{ city }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for city in user.cities.all %}
<span>{{ city }}</span>
{% endfor %}
{% endif %}
{% else %}
View ads on site:
{% endif %}
</a>
</span>
</div>
</div>
</div>
</div>
</div>
Templates modal window
{% load hosts %}
{% load widget_tweaks static %}
<div id="change-location">
<form action="{% host_url "setlocation" host "www" %}" method="post">
{% csrf_token %}
<div id="chose-city-wrap">
<div class="b-modal__title">Select your city</div>
<p>
<div class="b-modal__item">
<span>{{ location_form.country.label }}</span>
{{ location_form.country }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.districts.label }}</span>
{{ location_form.districts }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.regions.label }}</span>
{{ location_form.regions }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.cities.label }}</span>
{{ location_form.cities }}
</div>
</p>
<br />
<div class="b-modal__item b-modal__item_btn">
<input class="b-btn b-btn_red" type="submit" value="Сохранить">
</div>
</div>
</form>
</div>
<!-- end snippet -->
cities download form on the page where the brakes modal window!
<fieldset>
<legend>The territory of distribution of the ads</legend>
{{ form.country|add_class:"b-input__input js-select" }}
{{ form.districts|add_class:"b-input__input js-select chosen-select" }}
{{ form.regions|add_class:"b-input__input js-select chosen-select" }}
{{ form.cities|add_class:"b-input__input js-select chosen-select" }}
{# form.geo|add_class:"b-input__input" #}
</fieldset>

As you explain it, you have a lot of data to get (countries, cities), if you do it in php, you will lock the page until you retrive all those datas.
To have a shorter loading time, you just have to make everything in js (ajax).
You load your page with the cities, countries, ... without data.
Once the page is loaded (document.ready), you call your ajax to fill your cities, countries and so on.

Shopify JS (javascript) Carousel Slider

I need some help implementing this Coolcarousel example slider into my friend's Shopify website.
I suspect that the .js is not being read but I do not know why.
Here is the Link to the website the password is: thayro
Here is the code I am using in my theme.liquid
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
{% if settings.use_favicon %}
<link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
{% endif %}
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' /><![endif]-->
<title>
{{ page_title }}{% if current_tags %} – {{ 'general.meta.tagged' | t }} "{{ current_tags | join: ', ' }}"{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t }} {{ current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}
</title>
{% if page_description %}
<meta name="description" content="{{ page_description }}" />
{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="canonical" href="{{ canonical_url }}" />
{% include 'fb-open-graph-tags' %}
{% include 'twitter-card' %}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
{{ 'styles.scss.css' | asset_url | stylesheet_tag }}
{{ 'social-buttons.scss.css' | asset_url | stylesheet_tag }}
{{ 'jquery.carouFredSel-6.1.0-packed.js' | asset_url | script_tag }}
{{ 'jquery-1.8.2.min.js' | asset_url | script_tag }}
{{ 'test.js' | asset_url | script_tag }}
{% if settings.header_font contains 'Google' %}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family={{ settings.header_font | remove: 'Google+' }}:300,400,700">
{% endif %}
{% if settings.base_font contains 'Google' %}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family={{ settings.base_font | remove: 'Google+' }}:300,400,700">
{% endif %}
{{ 'html5shiv.js' | asset_url | script_tag }}
{{ content_for_header }}
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}
{{ 'jquery-migrate-1.2.0.min.js' | asset_url | script_tag }}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
{% if template contains 'customers' %}
{{ 'shopify_common.js' | shopify_asset_url | script_tag }}
{{ 'customer_area.js' | shopify_asset_url | script_tag }}
{% endif %}
{{ 'scripts.js' | asset_url | script_tag }}
{{ 'social-buttons.js' | asset_url | script_tag }}
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-aanhanger.gif" alt="ek-aanhanger" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-alien.gif" alt="ek-alien" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-artsen.gif" alt="ek-artsen" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-brandweer.gif" alt="ek-brandweer" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-dommel.gif" alt="ek-dommel" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-freudiaans.gif" alt="ek-freudiaans" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-kamikazepiloot.gif" alt="ek-kamikazepiloot" width="350" height="350" />
<img src="http://asapdesignstudio.com/sandbox/TKW/img/ek-langselkaarheen.gif" alt="ek-langselkaarheen" width="350" height="350" />
</div>
</div>
<!-- Begin toolbar -->
<div class="toolbar-wrapper wrapper">
<div class="toolbar span12 clearfix">
<ul class="unstyled">
{% if settings.display_search %}
<li class="search-field fl">
<form class="search" action="/search">
<input type="image" src="{{ 'icon-search.png' | asset_url }}" alt="Go" id="go">
<input type="text" name="q" class="search_box" placeholder="{{ 'layout.header.search' | t }}" value="{{ search.terms }}" />
</form>
</li>
{% endif %}
<li id="cart-target" class="toolbar-cart {% if cart.item_count != 0 %}has-items{% endif %}">
<a href="/cart" class="cart" title="Shopping Cart">
<span class="icon-cart"></span>
<span id="cart-count">{{ cart.item_count }}</span>
{{ 'layout.header.cart' | t }}
</a>
</li>
{% include 'customer_links' %}
<li id="menu-toggle" class="menu-icon fl"><i class="fa fa-bars"></i>{{ 'layout.header.menu' | t }}</li>
</ul>
</div>
</div>
<!-- End toolbar -->
<!-- Begin Mobile Nav -->
<div class="row mobile-nav-wrapper">
<nav class="mobile clearfix">
{% include 'mobile-menu' %}
</nav>
</div>
<!-- End Mobile Nav -->
<!-- Begin wrapper -->
<div id="transparency" class="wrapper clearfix">
<div class="row p0">
<!-- Begin navigation -->
{% if settings.logo_alignment == "center" %}
<div class="span12 clearfix">
<div class="logo">
{% if settings.use_logo %}
<h1><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /></h1>
{% if template == 'index' %}
<h1 style="display:none">{{ shop.name }}</h1>
{% endif %}
{% else %}
<h1>{{ shop.name }}</h1>
{% endif %}
</div>
</div>
<section id="nav" class="row p30">
<div class="span12">
<nav class="main">
{% include 'dropdown' %}
</nav> <!-- /.main -->
</div>
</section>
{% else %}
<div class="row" id="header">
<div class="span12 border-bottom nav-table">
<div class="nav-logo">
<div class="logo">
{% if settings.use_logo %}
<h1><img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" /></h1>
{% if template == 'index' %}
<h1 style="display:none">{{ shop.name }}</h1>
{% endif %}
{% else %}
<h1>{{ shop.name }}</h1>
{% endif %}
</div>
</div>
<div class="nav-links">
<section id="nav">
<nav class="main">
{% include 'dropdown' %}
</nav>
</section>
</div>
</div>
</div>
{% endif %}
<!-- End navigation -->
<!-- Begin content-->
<section id="content" class="clearfix">
{% if template == "list-collections" %}
<div id="collection" class="row">
<div class="span12">
<h1><span>{{ 'collections.list_collections.product_collections' | t }}</span></h1>
</div> <!-- /.span12 -->
</div> <!-- /.row -->
<div class="row products masonry">
{% for collection in collections %}
{% unless collection.all_products_count == 0 or collection.handle == "frontpage" %}
{% include 'collection-loop' %}
{% endunless %}
{% endfor %}
</div> <!-- /#collection.row -->
{% else %}
{{ content_for_layout }}
{% endif %}
</section>
<!-- End content-->
</div>
</div>
<!-- End wrapper -->
<!-- Begin footer -->
<div class="footer-wrapper wrapper">
<footer>
<div class="row">
<div class="span12 full-border"></div>
{% capture footer_columns %}{% if settings.footer_display_blog %}+{% endif %}{% if settings.footer_display_navigation %}+{% endif %}{% if settings.footer_display_newsletter %}+{% endif %}{% if settings.footer_display_social %}+{% endif %}{% endcapture %}
{% if footer_columns.size == 1 %}{% assign footer_span_size = 'span12' %}{% endif %}
{% if footer_columns.size == 2 %}{% assign footer_span_size = 'span6' %}{% endif %}
{% if footer_columns.size == 3 %}{% assign footer_span_size = 'span4' %}{% endif %}
{% if footer_columns.size == 4 %}{% assign footer_span_size = 'span3' %}{% endif %}
<!-- Begin latest blog post -->
{% if settings.footer_display_blog and blogs.news.articles.size > 0 %}
<div class="{{ footer_span_size }}">
{% assign article = blogs.news.articles.first %}
<div class="p30">
<h4>{{ 'layout.footer.latest_news' | t }}</h4>
<p class="p10"><strong>{{ article.title | link_to: article.url }}</strong></p>
<p>{{ article.content | strip_html | truncatewords: 30 }}</p>
</div>
</div>
{% endif %}
<!-- End latest blog post -->
{% if settings.footer_display_navigation and linklists.footer.links.size > 0 %}
<!-- Begin footer navigation -->
<div class="{{ footer_span_size }} footer-menu">
<h4>{{ 'layout.footer.quick_links' | t }}</h4>
<ul class="unstyled">
{% for link in linklists.footer.links %}
<li>{{ link.title }}</li>
{% endfor %}
</ul>
</div>
<!-- End footer navigation -->
{% endif %}
{% if settings.footer_display_newsletter %}
<!-- Begin newsletter -->
<div class="{{ footer_span_size }}">
<div class="p30">
<h4>{{ 'layout.footer.newsletter_title' | t }}</h4>
<form action="{{ settings.mailing_list_form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
<input type="email" value="" placeholder="{{ 'layout.footer.newsletter_email' | t }}" name="EMAIL" id="mail" /><input type="submit" class="btn newsletter" value="{{ 'layout.footer.newsletter_submit' | t }}" name="subscribe" id="subscribe" />
</form>
</div>
</div>
<!-- End newsletter -->
{% endif %}
{% if settings.footer_display_social %}
<!-- Begin social -->
<div class="{{ footer_span_size }}">
<h4>{{ 'layout.footer.follow_us' | t }}</h4>
{% if settings.twitter_link != blank %}Twitter{% endif %}
{% if settings.facebook_link != blank %}Facebook{% endif %}
{% if settings.youtube_link != blank %}YouTube{% endif %}
{% if settings.atom_link != blank %}Blog feed{% endif %}
{% if settings.instagram_link != blank %}Instagram{% endif %}
{% if settings.pinterest_link != blank %}Pinterest{% endif %}
{% if settings.vimeo_link != blank %}Vimeo{% endif %}
{% if settings.tumblr_link != blank %}Tumblr{% endif %}
{% if settings.google_link != blank %}Google+{% endif %}
</div>
<!-- End social -->
{% endif %}
<!-- Begin copyright -->
<div class="span12 tc copyright">
<ul class="credit-cards p10 clearfix">
{% if settings.accept_visa %}<li><img src="{{ 'icon-cc-visa.png' | asset_url }}" alt="Visa" /></li>{% endif %}
{% if settings.accept_mastercard %}<li><img src="{{ 'icon-cc-mastercard.png' | asset_url }}" alt="MasterCard" /></li>{% endif %}
{% if settings.accept_amex %}<li><img src="{{ 'icon-cc-amex.png' | asset_url }}" alt="Amex" /></li>{% endif %}
{% if settings.accept_discover %}<li><img src="{{ 'icon-cc-discover.png' | asset_url }}" alt="Discover" /></li>{% endif %}
{% if settings.accept_paypal %}<li><img src="{{ 'icon-cc-paypal.png' | asset_url }}" alt="PayPal" /></li>{% endif %}
{% if settings.accept_google %}<li><img src="{{ 'icon-cc-google.png' | asset_url }}" alt="Google Wallet" /></li>{% endif %}
{% if settings.accept_bitcoin %}<li><img src="{{ 'icon-cc-bitcoin.png' | asset_url }}" alt="Bitcoin" /></li>{% endif %}
</ul> <!-- /.credit-cards -->
<p>{{ 'layout.footer.copyright' | t }} © {{ 'now' | date: "%Y" }} {{ shop.name }} </p>
</div>
<!-- End copyright -->
</div>
</footer>
</div>
<!-- End footer -->
{{ 'jquery.flexslider-min.js' | asset_url | script_tag }}
{% if settings.enable_product_image_zoom %}
{{ 'jquery.zoom.js' | asset_url | script_tag }}
{% endif %}
{{ 'jquery.tweet.js' | asset_url | script_tag }}
{{ 'jquery.fancybox.js' | asset_url | script_tag }}
</body>
</html>