I have the following code in a base.html file in a Django project's header area.
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'create' %}"><span class="oi oi-plus"></span></a>
<a class="nav-item nav-link" href="javascript:{document.getElementById('logout').submit()}" onclick="">Logout</a>
<form id="logout" method="POST" action="{% url 'logout' %}">
{% csrf_token %}
<input type="hidden" />
</form>
{% else %}
<a class="nav-item nav-link" href="{% url 'signup' %}">Sign Up</a>
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
{% endif %}
I try to comment out the Javascript area "{% url 'create' %}" but it is not working (the error appears because the 'create' code chunks don't yet exists):
<a class="nav-item nav-link" href="/*{% url 'create' %}*/"><span class="oi oi-plus"></span></a>
<!-- <a class="nav-item nav-link" href="{% url 'create' %}"><span class="oi oi-plus"></span></a> -->
<!-- <a class="nav-item nav-link" href="/*{% url 'create' %}*/"><span class="oi oi-plus"></span></a> -->
When I delete the whole line the error disappears. What I would be interested is how to keep it as a comment so later on when I implement that area I can uncomment it.
You have two solutions.
For a code block use:
{% comment %}...{% endcomment %}
For single line you can use this:
{# some text #}
Related
I have made sidebar in sidebar.html
and had include it in main.html as well as dashboard.html through django include tag to reduce data reduntancy->
{% include 'employee/sidebar.html' %}
{% block content %}
{% endblock %}
Now how do I make different elements (in sidebar) active according to the different pages?
Like for example, When I am on dashboard.html , dashboard should be active in sidebar.
Here is sidebar.html
<ul>
<li class="nav-item">
<a class="nav-link" href="admin_dashboard.html">
<span>Dashboard</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="main.html">
<span>Create</span></a>
</li>
</ul>
You should use the url tag for getting the path to your other views/urls, this tag takes an argument as that stores the result of the tag as a variable, this variable can be used to add classes if the current path matches the URL
<ul>
{% url 'dashboard' as dashboard_url %}
<li class="nav-item {% if request.path == dashboard_url %}active{% endif %}">
<a class="nav-link" href="{{ dashboard_url }}"><span>Dashboard</span></a>
</li>
{% url 'main' as main_url %}
<li class="nav-item {% if request.path == main_url %}active{% endif %}">
<a class="nav-link" href="{{ main_url }}"><span>Create</span></a>
</li>
</ul>
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
I have made a navbar with bootstrap4 and I want to toggle the icon of current page to active.
Currently, I am using
<li class="nav-item"><a href="/" id="A"
{% if request.path == "/" %}
class="nav-link active"
{% else %}
class="nav-link"
{% endif %}>Home</a></li>
<li class="nav-item"><a href="/blog" id="B"
{% if request.path == "/blog/" %}
class="nav-link active" {% else %}
class="nav-link"
{% endif %}>Blog</a></li>
what I would like is a simpler way with use of url names that could activate a script
like this:
{% if request.path == '/' %}
<script>
document.getElementById("#A").classList.add('active');
if ( document.getElementById("#A").classList.contains('active') )
document.getElementById("#A").classList.toggle('active');
</script>
{% elif request.path == '/blog/' %}
<script>
document.getElementById("#B").classList.add('active');
if ( document.getElementById("#B").classList.contains('active') )
document.getElementById("#B").classList.toggle('active');
</script>
{% endif %}
Could there be an easier way? Please suggest to highlight the active page icon on navbar to toggle styles.
Thank you
The best way to do this without violating DRY principles and hard-coding your urls would be to use reverse in the templates.
Example:
<!-- Top of page (below extends and include) -->
{% url 'index' as index %}
{% url 'blog' as blog %}
<!-- ..... Body HTML ..... -->
<li class="nav-item">
<a href="{{ index }}" id="A" class="nav-link {% if request.path == index %}active{% endif %}">
Home
</a>
</li>
<li class="nav-item">
<a href="{{ blog }}" id="B" class="nav-link {% if request.path == blog %}active{% endif %}">
Blog
</a>
</li>
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 %}.
base.html
<body class="skin-red">
<!-- Site wrapper -->
<div class="wrapper">
<!-- #HEADER -->
{% include 'HEADER.html' %}
<!-- /#HEADER -->
<!-- #SIDEBAR -->
{% include 'SIDEBAR.html' %}
<!-- /#SIDEBAR -->
<!-- #BODY -->
{% block content %}
{% endblock %}
<!-- /#BODY -->
<!-- #FOOTER -->
{% include 'FOOTER.html' %}
<!-- /#FOOTER -->
{% block extrajavascript %}
{% endblock %}
</body>
HEADER.html:
<header class="main-header">
<b>Resource</b> Monitor <i class="fa fa-bar-chart-o" style="color:#ffd400"></i>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<ul class="nav navbar-nav">
<li>Home <span class="sr-only">(current)</span></li>
<li> PC information </li>
<li><a data-toggle="tab" href="#tab_sysuse">??? ???</a></li>
<li><a data-toggle="tab" href="#tab_procuse">???? ???</a></li>
<li><a data-toggle="tab" href="#tab_prodet">???? ????</a></li>
<li><a data-toggle="tab" href="#tab_sdwt">SDWT ????</a></li>
<li><a data-toggle="tab" href="#tab_pcevents">??? ?? ??</a></li>
<li><a data-toggle="tab" href="#tab_winevents">??? ?? ID? ??</a></li>
<li><a data-toggle="tab" href="#tab_agentinfo">Agent ????</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Email ?? ?? <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="tab" href="#tab_emailconfigs">??? ??</a></li>
<li><a data-toggle="tab" href="#tab_emailreceiver">??? ??</a></li>
</ul>
</li>
</ul>
</nav>
</header>
When I click header tab menu, I want to reload only
{% block content %}
{% endblock %}
not whole pages.. but now It reloaded the whole page..
There are formbox in my side bar and there are some values which user input. so I don't want to loose my user input by refresh whole page. Is there any solution..?
You need javascript AJAX api to get the content and change the html content using javascript DOM api if you need "without reload" function.
Django or any application server or http webserver works in a
request-response way, when a response is returned to the browser, the
server has no control to the client.