Develop Reference

I don't know why javascript is not working in the below mentioned code for back to top button for the blog page

The javascript in the base footer file is not working and that's why the back-to-top button in the base file is not working as expected. the functionality and all is working in the back-to-top button but the button is not visible because through javascript, I am adding a class active but it is not adding in this page but the base file is also linked to another page and there everything is working fine. I am not able to figure it out why it is not working. Below is the main blog file where base-home-footer file is linked to.
{% extends 'media/assets/base-media.html' %}
{% load main %}
{% load static %}
<!-- title start -->
{% block title %}Prishni- Our Blog{% endblock title%}
<!-- title end -->
<!-- header start-->
{% block header %}
{% include 'assets/base-home-header.html' %}
{% endblock header %}
<!-- header end -->
<!-- Content Start -->
{% block mediaContent %}
{% load markdownExtras %}
<div class="wrapper _bg4586 _new89" id="main-content" role="main">
<div class="_215cd2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="course_tabs">
<nav>
<div class="nav nav-tabs tab_crse justify-content-center">
<a class="nav-item nav-link active" href=" {% url 'media:ourBlog' %} ">Blog</a>
</div>
</nav>
</div>
<div class="title129 mt-35 mb-35">
<h1 align="center">Insights, ideas, and stories</h1>
</div>
</div>
</div>
</div>
</div>
<div class="_205ef5">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-5">
<div class="fcrse_3 mt-50">
<ul class="blogleft12">
<li>
<div class="collapse" id="collapse1">
<ul class="category-card">
<li>
All
Students
Instructors
Ideas & Opinions
Edututs+ News
Social Innovation
</li>
</ul>
</div>
<a href="{% getFacebookLink %}">
<div aria-label="facebook" style="display:flex;justify-content:center;align-items:center;" class="facebook158" data-href="" onclick="sharingPopup(this);" id="facebook-share">
<i style="margin:auto;" class="uil uil-facebook ic45"></i> </div> </a>
<a href="{% getLinkedInLink %}">
<div aria-label="linkedIn" style="display:flex;justify-content:center;align-items:center;" class="facebook158" data-href="" onclick="sharingPopup(this);">
<i class="fab fa-linkedin-in ic45"></i>
</div> </a>
<a href="{% getInstagramLink %}">
<div aria-label="instagram" style="display:flex;justify-content:center;align-items:center;" class="facebook158" data-href="" onclick="sharingPopup(this);" >
<i class="uil uil-instagram ic45"></i>
</div> </a>
</li>
</ul>
</div>
</div>
<div class="col-lg-9 col-md-7">
{% for blog in blogs %}
<div class="blogbg_1 mt-30">
<a href="{% url 'media:singleView' blog.id %}" class="hf_img">
<img src=" {{ blog.blog_img.url }} " alt="" />
<div class="course-overlay"></div>
</a>
<div class="hs_content">
<div class="vdtodt">
<span class="vdt14">{{ blog.count }} views</span>
<span class="vdt14">{{ blog.pub_date }}</span>
</div>
{{ blog.title }}
<p class="blog_des">
{{ blog.body | markdown | safe | truncatewords:40 }}
</p>
<a href=" {% url 'media:singleView' blog.id %} " class="view-blog-link">Read More<i
class="uil uil-arrow-right"></i></a>
</div>
</div>
{% endfor %}
<!-- </div> -->
</div>
</div>
<div class="main-p-pagination">
{% if blogs.has_other_pages %}
<ul class="pagination">
{% if blogs.has_previous %}
<li>
<a class="page-link" href="?page={{ blogs.previous_page_number }}" aria-label="Previous">
PREV
</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="" aria-label="Previous">
PREV
</a>
</li>
{% endif %}
{% for i in blogs.paginator.page_range %}
{% if blogs.number == i %}
<li class="page-link active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li class="page-link">{{ i }}</li>
{% endif %}
{% endfor %}
{% if blogs.has_next %}
<li class="page-item"><a class="page-link" href="?page={{ blogs.next_page_number }}">NEXT</a></li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="" aria-label="Next">
NEXT
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock mediaContent %}
{% block footer %}
{% include 'assets/base-home-footer.html' %}
{% endblock footer %}
<!-- Footer End -->
Below is the base-home-footer file where back-to-top button code is implemented.
{% block footer %} {% load main %} {% load static %}
<style>
html {
scroll-behavior: smooth;
}
footer .back-to-top .bttBtn {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
opacity: 0;
z-index: 2;
}
footer .back-to-top .bttBtn.active {
opacity: 1;
}
footer .back-to-top .bttBtn.active:hover {
cursor: pointer;
background: #fa6742;
border-color: #fa6742;
}
</style>
<footer
class="footer mt-30"
style="position: relative; margin-top: 200px; text-align: center"
>
<div class="container" style="text-align: right">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
About Us
Blog
<!--Press-->
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
Help
FAQ
Feedback
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
Careers
Advertise
Contact Us
<!-- Copyright Policy
Terms of Use
Privacy Policy -->
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="item_f1">
<div class="edu_social_links">
<a aria-label="faceBook Page" href="{% getFacebookLink %}"
><i class="fab fa-facebook-f"></i
></a>
<a aria-label="LinkedIn Page" href="{% getLinkedInLink %}"
><i class="fab fa-linkedin-in"></i
></a>
<a aria-label="Instagram Page" href="{% getInstagramLink %}"
><i class="fab fa-instagram"></i
></a>
</div>
</div>
</div>
</div>
</div>
<!-- Copyright-->
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="footer_logo">
<a href=" {% url 'index' %} ">
<img
src=" {% static 'images/sign_logo.svg' %} "
alt="logo, link to home page"
/>
</a>
<span>Copyright © 2021, All Right Reserved Prishni</span>
</div>
</div>
<!-- End Col -->
<div class="col-md-6">
<div class="copyright-menu">
<ul>
<li>
Home
</li>
<li>
Terms
</li>
<li>
Privacy Policy
</li>
<li>
Cookies
</li>
</ul>
</div>
</div>
<!-- End col -->
</div>
<!-- End Row -->
</div>
<!-- End Copyright Container -->
</div>
<!-- End Copyright -->
<!-- Back to top -->
<div id="back-to-top" class="back-to-top" onclick="toTop()">
<div class="btn btn-dark bttBtn" aria-label="Back to Top">
<i class="fa fa-angle-up"></i>
</div>
</div>
<!-- End Back to top -->
</footer>
<script>
function toTop() {
window.scrollTo(0, 0);
$(".back-to-top").addClass("active");
}
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 150) {
$(".bttBtn").addClass("active");
} else {
$(".bttBtn").removeClass("active");
}
});
</script>
{% endblock footer %}

Twitter-Bootstrap 5 carousel indicators and controls not working. Why?

I am making a ecommerce website with Django framework.
I cannot make my bootstrap carousel work. Clicking on indicators and controls has no effect.
I have pulled in Bootstrap source files with NPM.
main.html
<!DOCTYPE html>
{% load static %}
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<title>
{% block title %}
{% endblock title %}
</title>
</head>
<body class="mt-sm-5 mt-md-5 mt-lg-5 mt-xl-5">
<header>
<div class="container border-bottom border-primary border-1">
</div>
</header>
<section class="page-content" id="page-content">
{% block content %}
{% endblock content %}
</section>
<script src="{% static 'js/bootstrap.js' %}"></script>
</body>
</html>
product_details.html
{% extends 'main.html' %}
{% load static %}
{% block title %}
Boutique - {{ product.title }}
{% endblock title %}
{% block content %}
<div class="container">
<div class="row" >
<div id="product-carousel" class="col-sm-12 col-md-6 border border-danger carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
{% if product.image2 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
{% endif %}
{% if product.image3 %}
<button type="button" data-bs-target="#product-carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
{% endif %}
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ product.image.url }}" class="img-fluid" alt="...">
</div>
{% if product.image2 %}
<div class="carousel-item">
<img src="{{ product.image2.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
{% if product.image3 %}
<div class="carousel-item">
<img src="{{ product.image3.url }}" class="img-fluid" alt="...">
</div>
{% endif %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#product-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#product-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-sm-12 col-md-6 border border-warning">
<h3> {{ product.title }} </h3>
<h4> {{ product.price }} € </h4>
<h5> {{ product.description }} </h5>
<h6> {{ product.category }} </h6>
{% if product.stock > 0 %}
<div class="container border border-success">
<div class="row" >
<div class="col">
<label for="select-qty">Quantity</label>
</div>
<div class="col">
<select class="form-select form-select-sm" aria-label=".form-select-sm example" id="select-qty">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
<button id="add-to-cart-button" value="{{ product.id }}" type = "button" class="btn btn-success">Ajouter au panier</button>
</div>
</div>
</div>
{% endif %}
<div class="container">
<div class="row" >
<div class="col-sm-12 col-md-6">
<a class="btn btn-dark" href="{% url 'basket:basket_summary' %}">Panier</a>
</div>
<div class="col-sm-12 col-md-6">
<a class="btn btn-light" href="{% url 'store:all_products' %}">Voir les produits</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Add to cart
$(document).on('click', '#add-to-cart-button', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: '{% url "basket:basket_add" %}',
data: {
productid: $('#add-to-cart-button').val(),
productqty: $('#select-qty option:selected').val(),
csrfmiddlewaretoken: "{{csrf_token}}",
action: 'post',
},
success: function (json) {
document.getElementById("cart-count").innerHTML = json.qty;
},
error: function (xhr, errmsg, err) {
},
});
})
</script>
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>
{% endblock content %}
The products have at least to images (image and image 2) and the controls and indicators show. But nothing happens when clicking on them.
EDIT
In the browser console, I have two errors.
Uncaught SyntaxError: import declarations may only appear at top level of a module
Uncaught TypeError: $(...).carousel is not a function

You are getting an Uncaught TypeError: $(...).carousel is not a function because you called that function before you loading the boostrap.js.
Give this a try, first load the boostrap.js (you can load it from your local)
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
then add your custom script
<script type="text/javascript">
$(function(){
$('#product-carousel').carousel();
});
</script>

Cant figure out infinite scrolling with Waypoints

Trying to apply infinite scrolling using Waypoints but cant seem to get it working.
I have the following scripts loaded in my base.html after downloading them and saving in my static folder:
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
Then I have the following code in my template exteded from the base:
{% extends "base.html" %}
{% load static %}
{% block css %}
<link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}
{% block content %}
<br>
<div class="container status-update">
<div class="container">
<form>
<div class="input-group-lg">
<input type="text" class="form-control" value="What's new?">
</div>
<br style="height:20px">
<button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
</form>
</div>
</div>
<br>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-nav">
<a class="nav-link active" href="{% url 'home' %}">Activity Feed</a>
<a class="nav-link" href="{% url 'vehicle_updates' %}">Vehicle Updates<span class="sr-only">(current)</span></a>
<a class="nav-link" href="/space.html">Garage Updates</a>
</div>
</div>
</nav>
</div>
<br>
<div class="container">
<div class="primary-segments">
<h2>Activity Updates</h2>
<div class="infinite-container">
{% for post in posts %}
<div class="infinite-item">
<div class="card m-3">
<div class="card-body" style="background-color:#bdcade; padding-bottom:0px">
<div class="media mb-3">
<img src="{{ user.profile.image.url }}" class="d-block ui-w-40 rounded-circle" style="width:40px;height:auto;" alt="">
<div class="media-body ml-3">
<h5 style="color:#ffffff">{{ post.user.first_name }} {{ post.user.last_name }}</h5>
<div class="small text-muted">Yesterday</div>
</div>
</div>
</div>
{% if post.image %}
<img src="{{ post.image.url }}" class="card-img-top" alt="">
{% endif %}
<div class="card-body">
<h5 class="card-title">{{ post.title }}</h5>
<p class="card-text">{{ post.content }}</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary">Like</button>
<button type="button" class="btn btn-secondary">Comment</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}
</div>
</div>
<script type="javascript">
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
});
</script>
{% endblock content %}
When I run the server and load the page, it just shows a `more' button at the bottom of the page that I can click on to take me to the next group of objects (set pagination to 3 in the view).
Doesn't look like it is throwing any errors in the console when I run the server, so I'm not sure where to look next for the problem. Any help would be much appreciated.

Figured it out.
Moved the the JS script tags from the bottom of the body up into the head and it started working. Wasn't aware of this location dependency.

Add active class for both div bootstrap carousel

I have such html
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for project in similarProjects %}
<div class="item {% if loop.first %}active{% endif %}">
<span >{{ project.title }}</span>
</div>
{% endfor %}
</div>
<article>
<div class="carousel-inner">
{% for project in similarProjects %}
<div class="item {% if loop.first %}active{% endif %}">
{{ project.text }}
</div>
{% endfor %}
</div>
</article>
I need to when i click on my navigation, turning the pages and page titles and text. Now if I click, for example, scroll to the right, just flipping the text and title remains the same. Please, help me solve this problem.
P.S.
My nav
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
Right side the same

Django and Loading Javascript

I'm setting up a Bootstrap Carousel working from a Django-powered image database. I have no errors in the console log, jQuery is loading, etc., so I'm definitely missing something painfully obvious. It does not transition to other slides, and the controls are not working either. I have tried loading the carousel library separately, and nothing seems to work. I'm using jQuery 1.11.0 loaded via CDN from Google. I'm using jQuery 1.11.3 served via Static files in Django. The error seems to be in how Django is loading the varied Javascripts, but I'm not savvy enough to determine what the issue is.
ETA:
I am loading bootstrap.min.js after jQuery. I normally have some custom JS running, but I've removed that script for testing.
Here's the Django code generating the carousel:
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<script src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
</head>
<body>
{% include "menu.html" %}
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
{% for image in index_carousel %}
{% if forloop.first %}
<li data-target='#mycarousel' class='active' data-slide-to='{{ forloop.counter }}'></li>
{% else %}
<li data-target='#mycarousel' data-slide-to='{{ forloop.counter }}'></li>
{% endif %}
{% endfor %}
</ol>
<div class="carousel-inner">
{% for image in index_carousel %}
{% if forloop.first %}
<div class="item active">
{% else %}
<div class="item">
{% endif %}
<img class="img-responsive" src="{{ image.carousel_image.url }}" alt="Carousel Slide - {{ image.alt_text }}">
</div>
{% endfor %}
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
Here's the generated HTML:
<!DOCTYPE html>
<html>
<head>
<script src="/static/js/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="panel panel-primary shadow-normal">
<div class="panel-body">
<div id="mycarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target='#mycarousel' class='active' data-slide-to='1'></li>
<li data-target='#mycarousel' data-slide-to='2'></li>
<li data-target='#mycarousel' data-slide-to='3'></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img class="img-responsive" src="/media/carousel_images/staff_blogs.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/aarp-tax-help-slide_ZznUFS2.png" alt="Carousel Slide - ">
</div>
<div class="item">
<img class="img-responsive" src="/media/carousel_images/august_book_sale_new.png" alt="Carousel Slide - ">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel -->
</div>
</div>
</div>
<script type="javascript" src="/static/js/bootstrap.min.js"></script>
<script>
$(document).ready( function() {
setTimeout( function() {
$('#mycarousel').carousel();
}, 15000)
});
</script>
</body>
</html>
The error I consistently get is
$(...).carousel() is not a function.
What could be the issue here? All the files are being found, and I've tried timeouts to make sure everything is loaded, but to no avail. I'm running this same setup served via PHP/MySQL, and it works, so the only variable is Django. Is there something I'm missing with loading the static files?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Please include the above lines, its working fine if I include the above.