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 %}
Related
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 %}
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>
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.
$(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
Can I insert multiple block js in my twig?
I need to do that because I have a highcharts error if i have a null value on the first chart ,so I thaught aboutputting the javascript call after every call of the chart?
Is that possible?
like this:
{% block content %}
<div class="">
<div class="page-title">
<div class="title_left">
<h3><i class="fa fa-university"></i> Home</h3>
</div>
</div>
<div class="clearfix"></div>
<div class="row" id="indexStat">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_content">
<div id="partie_charts" >
<div id="part1">
<div id="cloumnchart" style="display:inline-block;width: 490px;height: 347px ;margin: 0 auto"></div>
{% block js %}
{{ chart(cloumnchart) }}
{% endblock %}
<div id="basicline"
style="display:inline-block;width: 400px;height: 347px ; margin: 0 auto"></div>
{% block js %}
{{ chart(basicline) }}
{% endblock %}
</div>
<div id="part2">
<p >Person</p>
<div id="containerper"
style="display:inline-block;width: 450px;height: 251px ; margin: 0 auto"></div>
{% block js %}
{{ chart(containerper) }}
{% endblock %}
</div>
<div id="containerpie"
style="width: 340px; height: 164px; margin: 0 auto;">
</div>
{% block js %}
{{ chart(containerpie) }}
{% endblock %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
{% endblock %}