Develop Reference

Having trouble with a hierarchical Wordpress sidebar menu. The script always appends the slug so you can't navigate back up the hierarchy

The menu uses a toggle to drop down child pages. It's then possible to navigate to a child page, but getting back to the parent page, or a different parent page is impossible, since each time, the slug is appended to the URL.
For example:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/
Within the Women and Epilepsy segment I can reach child pages like:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/
But I can't then go back to a different section like 'Living With Epilepsy' because this happens, resulting in a 404:
https://rogera25.sg-host.com/managing-epilepsy/women-and-epilepsy/pregnancy-planning/living-with-epilepsy
Can anyone help? Thanks so much for taking the time to read this!
<aside class="sub-menu col mx-auto">
<ul class="nav flex-column mx-2 menu">
{% set siblings = post_query({
'post_type': 'page',
'post_parent': ancestor,
'orderby': 'menu_order',
'order': 'ASC'
}) %}
<a class="nav-side-title {% if fn('is_page', ancestor.slug) %}active{% endif %}" href="{{ ancestor.link }}">
<h4>{{ ancestor_name }}</h4></a>
{% for sibling in siblings %}
{% if sibling.children %}
<div class="top mx-2 d-flex align-items-baseline">
<li class="nav-item top-parent has-child collapsed" href="#{{ sibling.slug }}" data-toggle="collapse" aria-controls="{{ sibling.title }}"></li>
<a class="nav-link {% if fn('is_page', sibling.slug) %}active{% endif %}" href="{{ sibling.slug }}">{{ sibling.title }}</a>
</div>
<ul id="{{ sibling.slug }}" class="collapse child-menu" aria-labelledby="{{ sibling.title }}">
{% for subpage in sibling.children %}
{% if subpage.post_type == "page" %}
{% if subpage.children %}
<div class="mx-3 d-flex align-items-baseline">
<li class="nav-item middle-parent has-child collapsed" href="#{{ subpage.slug }}" data-toggle="collapse" aria-controls="{{ subpage.title }}"></li>
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</div>
<ul id="{{ subpage.slug }}" class="grandchild-menu collapse" aria-labelledby="{{ subpage.title }}">
{% for subpage_2 in subpage.children %}
{% if subpage_2.post_type == "page" %}
<li class="nav-item bottom">
<a class="nav-link subpage{% if fn('is_page', subpage_2.slug) %} active{% endif %}" href="{{ subpage_2.link }}"> {{ subpage_2.title }}</a>
</li>
{% endif %}
{% endfor %}<!--subpage_2-->
</ul>
{% else %}<!--subpage.children-->
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %} <!--subpage.children-->
{% else %}
<li class="nav-item middle">
<a class="nav-link subpage{% if fn('is_page', subpage.slug) %} active{% endif %}" href="{{ subpage.link }}">{{ subpage.title }}</a>
</li>
{% endif %}<!--subpage.children page-->
{% endfor %} <!--subpage-->
</ul>
{% else %} <!--sibling.children-->
<li class="nav-item top">
<a class="nav-link {% if fn('is_page', sibling.slug) %} active{% endif %}" href="{{ sibling.link }}">{{ sibling.title }}</a>
</li>
{% endif %}<!--sibling.children-->
{% endfor %} <!--sibling-->
</ul>
</aside>

Infinite Scroll Django does not work proprely

Note: Intro: I am using this https://simpleisbetterthancomplex.com/tutorial/2017/03/13/how-to-create-infinite-scroll-with-django.html to add infinite scroll with django. Just in case anyone wants the detailed code its on Github.It is a very simple code
The Problem: Rather than having infinite scroll I only get more link so it does not work properly
In my static folder. I made a folder called js and added 3 files in it
infinite.min.js, jquery-3.1.1.min.js, jquery.waypoints.min.js
I copied the code exactly from the github in my files
BELOW IS MY VIEW
from django.shortcuts import render, get_object_or_404
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView
from django.contrib.auth.models import User
from .models import Post
from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
from django.http import HttpResponse
def home(request):
numbers_list = range(1, 1000)
page = request.GET.get('page', 1)
paginator = Paginator(numbers_list, 20)
try:
numbers = paginator.page(page)
except PageNotAnInteger:
numbers = paginator.page(1)
except EmptyPage:
numbers = paginator.page(paginator.num_pages)
return render(request, 'blog/home.html', {'numbers': numbers})
class PostListView(ListView):
model = Post
template_name = 'blog/home.html'
context_object_name = 'posts'
ordering = ['-date_posted']
paginate_by = 5
class UserPostListView(ListView):
model = Post
template_name = 'blog/user_posts.html'
context_object_name = 'posts'
paginate_by = 5
def get_queryset(self):
user = get_object_or_404(User, username=self.kwargs.get('username'))
return Post.objects.filter(author=user).order_by('-date_posted')
MY base.html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel = "stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
{% if title %}
<title> Django Blog - {{title}} </title>
{% else %}
<title> Django Blog </title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
<button class= "navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'profile' %}"> Profile</a>
<a class="nav-item nav-link" href="{% url 'logout' %}"> Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
{{message}}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
{% if user.is_authenticated %}
<a class="nav-item nav-link pb-2" href="{% url 'post-create' %}"> CREATE A POST!</a>
{% else %}
{% endif %}
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
onBeforePageLoad: function () {
$('.loading').show();
},
onAfterPageLoad: function ($items) {
$('.loading').hide();
}
});
</script>
<script src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>
{% block javascript %}{% endblock %}
</body>
</html>
**FINALLY MY HOME.HTML**
{% extends "blog/base.html" %}
<script>
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0],
});
</script>
{% block content %}
<a class="infinite-container">
{% for post in posts %}
<article class="media content-section ">
<img class ="rounded-circle article-img" src="{{post.author.profile.image.url}}">
<div class="media-body infinite-item">
<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 }}</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>
{% endfor %}
</div>
{% block javascript %}
{% endblock %}
{% if page_obj.has_next %}
<a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}">More</a>
{% endif %}
{% if page_obj.has_previous %}
<a class="infinite-more-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% endblock %}
Thank you

responsive hamburger navbar not functioning in django base.html

I am developing simple blogging site, the problem I am facing is my navbar is not responsive, below is my navbar seen in desktop.
but as I decrease the size of browser, nav bar gets hidden
what I need is hamburger icon on left top when I decrease the size of the screen on clicking that all navbar menu items should be visible vertically.
below is my code:
{% load static %}
<!doctype html>
<html lang="en">
<head>
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Young Minds</title>
{% endif %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="{% static 'blog/css/bootstrap.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/animate.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/owl.carousel.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/ionicons/css/ionicons.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/fontawesome/css/font-awesome.min.css' %}">
<link rel="stylesheet" href="{% static 'blog/fonts/flaticon/font/flaticon.css' %}">
<link rel="stylesheet" href="{% static 'blog/css/style.css' %}">
<link href="https://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merienda&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Theme Style -->
<!-- jquery functions -->
</head>
<body>
<header role="banner">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav" style="font-family: 'Hind', sans-serif;margin-left:198px;">
{% with url_name=request.resolver_match.url_name %}
<li class="nav-item" style="margin-right:15px;margin-left:-20px;">
<a class="nav-link active" href="{% url 'blog-home' %}" style="margin-top:-3px;">
<span style="font-size: 18px;">Blog </span></a>
</li>
<li class="nav-item" style="margin-right:15px;margin-left:88px;">
<a class="nav-link" href="{% url 'blog-home' %}">Home</a>
</li>
<li class="nav-item dropdown" style="margin-right:15px;">
<a class="nav-link dropdown-toggle" href="category.html" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Catogery</a>
<div class="dropdown-menu" aria-labelledby="dropdown04">
{% for category in categories %}
<a class="dropdown-item" href="{% url 'category-posts' category.category__category %}">{{category.category__category}}</a>
{% endfor %}
</div>
</li>
<li class="nav-item dropdown {% if url_name == 'index' %}active{% endif %}" style="margin-right:15px;">
<a class="nav-link" href="{% url 'about' %}">About Us</a>
</li>
{% if user.is_authenticated %}
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'profile' user%}">Profile</a>
</li>
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'post-create' %}">Create Blog</a>
</li>
<li class="nav-item" style="margin-right:15px;">
<a class="nav-link" href="{% url 'user-posts' user %}">My Blogs</a>
</li>
<li class="nav-item" style="float: left;">
<a class="nav-link" href="{% url 'logout' %}" >Logout({{ user.username }})</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'registration' %}">Signup</a>
</li>
{% endif %}
{% endwith %}
</ul>
</div>
</div>
</header>
{% block content%}
{% endblock content%}
<footer class="site-footer">
<div class="container">
<div class="row mb-5">
<div class="col-md-4">
<h3>Developer's Message</h3>
<p class="mb-4">
</p>
<p>Wish you all a very good day ! Enjoy Blogging ! <i class="fa fa-smile-o" aria-hidden="true"></i></p>
</div>
<div class="col-md-6 ml-auto">
<div class="row">
<div class="col-md-7">
<h3>Quick Links</h3>
<ul class="list-unstyled">
<li >
Home
</li>
<li>About</li>
<li class="About">Categories</li>
</ul>
</div>
<div class="mb-6">
<h3>Social</h3>
<ul class="list-unstyled footer-social">
<li><span class="fa fa-twitter"></span> Twitter</li>
<li><span class="fa fa-facebook"></span> Facebook</li>
<li><span class="fa fa-instagram"></span> Instagram</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<p class="small">
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright © <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>document.write(new Date().getFullYear());</script>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
</div>
</div>
</div>
</footer>
<!-- END footer -->
<!-- loader -->
<script src="{% static 'blog/js/jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'blog/js/jquery-migrate-3.0.0.js' %}"></script>
<script src="{% static 'blog/js/popper.min.js' %}"></script>
<script src="{% static 'blog/js/bootstrap.min.js' %}"></script>
<script src="{% static 'blog/js/owl.carousel.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'blog/js/jquery.stellar.min.js' %}"></script>
<script src="{% static 'blog/js/main.js' %}"></script>
<script type="text/javascript">
$('.reply-btn').click(function(){
console.log($(this).parent());
console.log($(this).parent().parent());
console.log($(this).parent().parent().next());
$(this).parent().parent().next('.comment-body').fadeToggle()
console.log("trigerred")
});
$(document).ready(function() {
$('.About').click(function(event) {
$("#About-content").toggle("slow");
});
});
$(document).ready(function(event){
$(document).on('click',"#like_the_post_by_user", function(event){
event.preventDefault();
console.log($("#like_the_post_by_user").val())
console.log("from jquery section")
var pk = $(this).attr('value');
$.ajax({
type : "POST",
url : "{% url 'like_post' %}",
data : {'id': pk , "csrfmiddlewaretoken": '{{ csrf_token }}' },
dataType : 'json',
success : function(response){
$('#like-section_user').html(response['form'])
console.log($('#like-section_user').html(response['form']));
},
error : function(rs, e){
console.log(rs.responseText);
}
});
});
});
</script>
</body>
</html>
I tried searching everywhere and tested on my own but I couldn't do it myself.
Any help will be greatly appreciated!
Thanks in advance!

You need to add a toggle button to have a hamburger menu
in your case would be something like
<header role="banner">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
...
</div>
</div>
</header>
...

Error using jQuery with django: Uncaught ReferenceError: jQuery is not defined

I am trying to use jQuery with my django app but when I use the inspector and look at the .js file in Sources, I am seeing this error. I know this question has come up before, but I haven't been able to figure out how to fix it in my case. This is the HTML for the page I am trying to load:
{% extends 'great_songs_app/base.html' %}
{% load static %}
{% block content %}
<script src="{% static 'great_songs_app/playlist_jquery.js' %}">
</script>
--code--
{% endblock %
And this is my base HTML file:
{% load static %}
<html lang="en-US">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://rsms.me/inter/inter-ui.css" rel="preload" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="{% static 'great_songs_app/style.css' %}">
<title>Great Songs</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{% url 'great_songs:great_songs' %}">Great Songs</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:great_songs' %}">Songs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:artists' %}">Artists</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:genres' %}">Genres</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:producers' %}">Producers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:labels' %}">Labels</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'great_songs:playlists' %}">Playlists</a>
</li>
</ul>
<ul class="navbar-nav" id="login-list">
{% if user.is_authenticated %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:logout' %}" id=login>log out</a>
</li>
{% else %}
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:login' %}" id=login>log in</a>
</li>
<li class="nav-item login">
<a class="nav-link" href="{% url 'users:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
This is my jQuery file:
jQuery(document).ready(function($) {
$(".playlist-row").click(function() {
window.location = $(this).data("href");
});
});

I had a similar problem and just I pasted the js files inside head tag.
Here is my base.html
Then inside body tag, the {% block content %}{% endblock %}.

Scrollspy - on nav click Chrome scrolls, IE & FF doesn't

Clicking on navbar scrolls the page correctly in Chrome, nothing happens in FF and IE.
Any idea?
Here's a part of my nav's jsx:
handleOnClick (e) {
e.preventDefault();
if (this.props.show) {
var target = $(e.target.parentElement);
var el = $('#section-' + this.props.id);
$('.list-group-item').removeClass('active');
$('.scrollspy').removeClass('scrollspy-active');
target.addClass('active');
$('body').animate(
{scrollTop: (el.offset().top - 20)},
{
duration: 200,
done: () => {
$('.scrollspy').addClass('scrollspy-active');
}
});
this.props.onSelected(e, this.props.id);
if ($(window).width() <= 992) {
$('.collapse').collapse('hide');
}
}
};
UPDATE: And here's my nav.html. Forgive me if it's too much.
Forums say that there used to be a scrollspy's problem regarding FF and IE that was releted to height but it doesn't seem to be that one.
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Main navigation -->
<ul class="nav navbar-nav">
{% for nav_item in nav %}
{% if nav_item.children %}
<li class="dropdown{% if nav_item.active %} active{% endif %}">
{{ nav_item.title }} <b class="caret"></b>
<ul class="dropdown-menu">
{% for nav_item in nav_item.children %}
{% include "nav-sub.html" %}
{% endfor %}
</ul>
</li>
{% else %}
<li {% if nav_item.active %}class="active"{% endif %}>
{{ nav_item.title }}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if repo_url %}
<li>
<a href="{{ repo_url }}">
{% if repo_name == 'GitHub' %}
<i class="fa fa-github"></i>
{% elif repo_name == 'Bitbucket' %}
<i class="fa fa-bitbucket"></i>
{% endif %}
{{ repo_name }}
</a>
</li>
{% endif %}
</ul>
</div>

It was about changing
$('body').animate(
to
$('html,body').animate(