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.
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>
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 am using Bootstrap 4 radio button radio button in a flask application. and below is the snippet I used
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary">
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
</label>
<label class="btn btn-outline-secondary" >
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
</label>
</div>
and the javascript code
<script type="text/javascript">
function toggleElements() {
alert('hurray');
if(document.getElementBId('twitter').checked) {
document.getElementById('twitterrows').style.display = 'block';
document.getElementById('facebookrows').style.display = 'none';
}
if(document.getElementById('facebook').checked) {
document.getElementById('facebookrows').style.display = 'block';
document.getElementById('twitterrows').style.display = 'none';
}
}
</script>
Initially,I tried with simple html radio buttons and was able to trigger Javascript function toggleElements(). However, after replacing the normal radio buttons with the bootstrap radio, nothing is triggered.
Below is the entire html code
{% from 'helper/forms.html' import render_field with context %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sharjah Tourism Search Results</title>
<script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/home.css')}}"/>
<script type="text/javascript">
function toggleElements() {
alert('hurray');
if(document.getElementBId('twitter').checked) {
document.getElementById('twitterrows').style.display = 'block';
document.getElementById('facebookrows').style.display = 'none';
}
if(document.getElementById('facebook').checked) {
document.getElementById('facebookrows').style.display = 'block';
document.getElementById('twitterrows').style.display = 'none';
}
}
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="{{ url_for('home')}}"><strong>Search</strong></a>
<button class = "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-7"
aria-controls="navbarSupportedContent-7" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-7">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{url_for('add_url')}}">Add<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('file_render')}}">Import</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Websites
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ url_for('list_urls') }}">List</a>
<a class="dropdown-item" href="{{ url_for('list_crawled_websites')}}">Selected</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<div class="container">
<br />
<div class="row">
<!-- Logo -->
<div class="col-sm">
<img class="w-50 h-60" src="{{url_for('static',filename='images/sctda_logo.jpg')}}" />
</div>
<!-- Search Bar -->
<div class="col-sm-5 searchbar">
<form action="{{url_for('fetch_results')}}" method="POST">
<div class="input-group">
<input type="search" placeholder="Search" class="form-control" name="search" id="search" value="{{data['search_term']}}" class="w-75 h-75" required>
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary btn-sm"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</div>
</div>
<div id="container">
<div class="row">
{%set data = data['results'] %}
<div class="col-md-4">
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="radio" checked autocomplete="off"> Internal
</label>
</div>
<hr>
{% set internals = data['internal'] %}
{% if internals is defined and internals|length %}
{% for internal in internals %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ internal['title'] }}</h5>
<p class="card-text">{{ internal['description'] }}</p>
{{ internal['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
<div class="col-md-4">
{% set externals = data['external'] %}
{% if externals is defined and externals|length %}
<div class="btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary active">
<input type="radio" checked autocomplete="off"> External
</label>
</div>
<hr>
{% for external in externals %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ external['title'] }}</h5>
<p class="card-text">{{ external['description'] }}</p>
{{ external['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
<div class="col-md-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-secondary">
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter
</label>
<label class="btn btn-outline-secondary" >
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook
</label>
</div>
<hr>
(<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="twitter"/> Twitter,
<input type="radio" onclick="javascript:toggleElements();" name="toggle" id="facebook"/> Facebook)
<div id="twitterrows">
{% set tweets = data['twitter'] %}
{% if tweets is defined and tweets|length %}
{% for tweet in tweets %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ tweet['title'] }}</h5>
<p class="card-text">{{ tweet['description'] }}</p>
{{ tweet['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
<div id="facebookrows">
{% set posts = data['facebook'] %}
{% if posts is defined and posts|length %}
{% for post in posts %}
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ post['title'] }}</h5>
<p class="card-text">{{ post['description'] }}</p>
{{ post['title'] }}
</div>
</div>
<br/>
{% endfor %}
{% else %}
<div class="card">
<div class="card-body">
<h5 class="card-title">No Records Found</h5>
</div>
</div>
<br/>
{% endif %}
</div>
</div>
</div>
</div>
<center>Developed by School of Information Technology Team,Skyline University College</center>
</body>
</html>
I strongly suspect with the order of scripts being called under the head tag. Can someone help me to fix this please.
make sure you have included the correct version of bootstrap. Please check if there is any error in the browser console.
https://getbootstrap.com/docs/4.4/components/input-group/#checkboxes-and-radios.
I am suspecting that the javascript click is not properly binded to the click event.
I fixed it by replacing the three script tags in the above html page with the below
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Here's the problem:
I have a simple unordered list of posts. Each post is truncated (250 chars), but should expand when clicked (Using .replaceWith). What I'm trying to do is replace the truncated Post.content with the "untruncated" Post.content. When I try this, the click returns the content of all the Posts in my list. I only want the content of the Post that I am clicking. Here's the relevant code:
<ul>
{% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
<div class="panel panel-default col-sm-offset-1 col-sm-8">
<p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>
<p style="color:gray">Author:
<a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
<hr style="">
<div class="post" >
<h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
</div>
<div class="expandContent">
<button class="btn btn-primary btn-sm">Read</button>
</div>
<br>
<br>
<br>
<div class="content">
<p>{{ post.content }}</p>
</div>
</div>
<br>
{% endfor %}
</ul>
Above is my basic list. Here is the JS that should expand the Post.content:
<script src="{% static 'posts/jquery-3.1.1.js' %}"></script>
<script type="text/javascript">
$(".expandContent").click(function(){$(".post").replaceWith($('.content'));
});
</script>
If any more information or code would be helpful, please let me know. If it's at all relevant, this project is on Django 1.10. Thank you!
You can do something like this
<ul>
{% for post in object_list %}<tr class="{% cycle 'row1' 'row2' %}"></tr>
<div class="panel panel-default col-sm-offset-1 col-sm-8">
<p><h4><B><a class="title" href="/posts/{{ post.id }}/">{{post.title }}</a></B></h4></p>
<p style="color:gray">Author:
<a style="color:darkgray" href="{% url 'accounts:profile' %}"> <span class="link">{{ user.first_name }} {{ user.last_name }}</span></a></p>
<hr style="">
<div class="post" >
<h5 style="color: rgba(101, 106, 106, 1)">{{post.content|truncatechars:250 }}</h5>
</div>
<div class="expandContent">
<button class="btn btn-primary btn-sm" onclick="replace("content-1">Read</button>
</div>
<br>
<br>
<br>
<div class="content" id="content-1">
<p>{{ post.content }}</p>
</div>
</div>
<br>
{% endfor %}
</ul>
and in the replace function you can getelementbyid and display it.