I thought that by just including jQuery from CDN in base.html, it will be defined in all html pages that extend the base, like when including from static files, without repeating
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
base.html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>notifyMe</title>
<!-- Bootstrap -->
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/style.css" rel="stylesheet">
</head>
<body>
<h1>NotifyMe</h1>
{% block main %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Edit
event_add.html:
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block main %}
<div class="container">
<div id="form" class="col-md-6 col-md-offset-3 jumbotron">
<div class="text-center">
<h3>New Task</h3>
</div>
<form method="POST">
{% csrf_token %}
{% for field in form.visible_fields %}
<div class="form-group row">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{field|add_class:'form-control'}}
{% for error in field.errors %}
<span class="help-block"> {{ error}} </span>
{% endfor %}
</div>
{% endfor %}
<div class="form-group">
<button type="submit" class="btn btn-success">
<span class="glyphicon glyphicon-ok"></span> Save
</button>
Cancel
</div>
</form>
</div>
</div>
<script>
$(function() {
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "2016:2020",
});
});
</script>
{% endblock %}
My function wasn't recognize until I added the CDN line before the function script.
Does {% extends 'base.html' %} have some limits?
The .datepicker() plugin you try to use is included in Jquery-UI. I suggest you to restructure your templates as follows (irrelevant parts removed for clarity):
base.html
<html lang="en">
...
...
{% block main %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Consider also adding Bootstrap.js here! -->
{% block extra_js %}{% endblock extra_js %}
</body>
</html>
and use main block for HTML content and extra_js block for Javascript. This way you will guarantee that any user scripts will come after JQuery. For example:
event_add.html
{% extends 'base.html' %}
{% load widget_tweaks %}
{% block main %}
<div class="container">
...
...
</div>
{% endblock main %}
{% block extra_js %}
<script src='//code.jquery.com/ui/1.11.4/jquery-ui.js'></script>
<script>
$(function() {
...
...
</script>
{% endblock extra_js %}
Related
Basicly my django project consists of the templates with html.
I would like to fill the context of the site using blocks.
My problem is that I would like to send the block to sidebar and the base part of the page from application's .html files.
Templates:
sidebar.html
footer.html
header.html
base.html
In my base.html I use:
{% include 'partials/_sidebar.html' %}
{% block content %}{% endblock %}
in my sidebar.html I use
{% block sidebar %}{% endblock %}
and in my Application index.html i try to use:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<h1>Home Page</h1>
{% endblock %}
{% block sidebar %}
<div class="bg-white py-2 collapse-inner rounded"></div>
<h6 class="collapse-header">Custom Components:</h6>
<a class="collapse-item" href="{% url 'veggies' %}">veggies</a>
<a class="collapse-item" href="{% url 'fruits' %}">fruits</a>
</div>
{% endblock %}
But it is obviously not working.
The starting page triggers app/index.html with a view.
How to workaround such a problem?
[i cant add post][1]
[1]: https://i.stack.imgur.com/FV3Co.png
Hopefully I can demonstrate how you use blocks by sharing some example templates with you.
Starting with a base template, that generally has the most content and contains the basic markup;
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock title %}</title>
<meta name="description" content="{% block meta_description %}{% endblock meta_description %}">
<meta name="viewport" content="width=device-width,initial-scale=1">
{% block styles %}{% endblock %}
{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<script type="text/javascript" src="https://kit.fontawesome.com/c3c34cb042.js" crossorigin="anonymous"></script>
{% endblock %}
{% block head_extras %}{% endblock %}
</head>
<body>
{% block header %}{% endblock header %}
{% block content %}{% endblock content %}
{% block footer %}{% endblock footer %}
{% block footer_scripts %}
<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.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>
Then a page for content would extend that and you'd include in this template the blocks you want to add content to;
{% extends "base.html" %}
{% load static %}
{% block title %}Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
</div>
</section>
{% endblock content %}
That'd be a really simple setup. But as you've said, you might also use the {% include %} tag.
What that does is inject the content of the included template into the template at the point you use the tag.
So in a template with a sidebar, that might look like;
{% extends "base.html" %}
{% load static %}
{% block title %}Sidebar Content Page{% endblock title %}
{% block content %}
<section class="">
<div class="container-fluid container-xl">
<div class="content-section">
<h1 class="content-section__heading-1">Content Page</h1>
<p>Hello World!</p>
</div>
{% include 'partials/_sidebar.html' %}
</div>
</section>
{% endblock content %}
I m working on learning Django with MDN project on Local Library.
My two pages are rendering whereas the book detail page is not rendering and giving error page not found. Please advice what if I have missed anything:
So far entire project is on MDN documents.
catalog/urls.py
from django.urls import path
from catalog import views
app_name = 'catalog'
urlpatterns = [
path('', views.index, name='index'),
path('books/', views.BookListView.as_view(), name='books'),
path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'),
]
catalog/templates/catalog/book_detail.html
{% extends 'catalog/base.html' %}
{% block content %}
<h1>Title: {{ book.title }}</h1>
<p><strong>Author:</strong> {{ book.author }}</p>
<p><strong>Summary:</strong> {{ book.summary }}</p>
<p><strong>ISBN:</strong> {{ book.isbn }}</p>
<p><strong>Language:</strong> {{ book.language }}</p>
<p><strong>Genre:</strong> {{ book.genre.all|join:", " }}</p>
<div style="margin-left:20px;margin-top:20px">
<h4>Copies</h4>
{% for copy in book.bookinstance_set.all %}
<hr>
<p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'd' %}text-danger{% else %}text-warning{% endif %}">{{ copy.get_status_display }}</p>
{% if copy.status != 'a' %}<p><strong>Due to be returned:</strong> {{copy.due_back}}</p>{% endif %}
<p><strong>Imprint:</strong> {{copy.imprint}}</p>
<p class="text-muted"><strong>Id:</strong> {{copy.id}}</p>
{% endfor %}
</div>
{% endblock %}
catalog/templates/catalog/base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="{% static 'catalog/style.css' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"/>
{% block title %}
<title></title>
{% endblock %}
</head>
<body>
<header>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
{% block sidebar %}
<ul class="sidebar-nav list-inline1 p-2">
<li class="list-inline-item1">Home</li>
<li class="list-inline-item1">All books</li>
<li class="list-inline-item1">All authors</li>
</ul>
{% endblock %}
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
I put a file named password_reset_confirm.html in my Django project's templates/registration/ directory. But if I change the extends tag it won't load anything else. This template loads when a user clicks a password reset link from their email inbox.
Here's what my password_reset_confirm.html looks like:
{% extends "admin/base_site.html" %}
{% load i18n %}
{% block breadcrumbs %}
<div class="breadcrumbs">
{% trans 'Home' %}
› {% trans 'Password reset confirmation' %}
</div>
{% endblock %}
{% block title %}{{ title }}{% endblock %}
{% block content_title %}<h1>{{ title }}</h1>{% endblock %}
{% block content %}
THIS IS A CUSTOM FILE; I ONLY ADDED THIS SENTENCE.
{% if validlink %}
<p>{% trans "Please enter your new password twice so we can verify you typed it in correctly." %}</p>
<form method="post">{% csrf_token %}
{{ form.new_password1.errors }}
<p class="aligned wide"><label for="id_new_password1">{% trans 'New password:' %}</label>{{ form.new_password1 }}</p>
{{ form.new_password2.errors }}
<p class="aligned wide"><label for="id_new_password2">{% trans 'Confirm password:' %}</label>{{ form.new_password2 }}</p>
<p><input type="submit" value="{% trans 'Change my password' %}" /></p>
</form>
{% else %}
<p>{% trans "The password reset link was invalid, possibly because it has already been used. Please request a new password reset." %}</p>
{% endif %}
{% endblock %}
I want to change the first two lines to this:
{% extends "base.html" %}
{% load i18n mezzanine_tags staticfiles %}
But when I do that, nothing below those lines loads. What do I need to change so that the template loads my base.html as well as the password reset form?
EDIT: By request, here is my base.html:
<!doctype html>
<html lang="{{ LANGUAGE_CODE }}"{% if LANGUAGE_BIDI %} dir="rtl"{% endif %}>
{% load pages_tags mezzanine_tags i18n staticfiles %}
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="{% block meta_keywords %}{% endblock %}">
<meta name="description" content="{% block meta_description %}{% endblock %}">
<title>{% block meta_title %}{% endblock %}{% if settings.SITE_TITLE %} | {{ settings.SITE_TITLE }}{% endif %}</title>
<link rel="shortcut icon" href="{% static "img/favicon.ico" %}">
{% ifinstalled mezzanine.blog %}
<link rel="alternate" type="application/rss+xml" title="RSS" href="{% url "blog_post_feed" "rss" %}">
<link rel="alternate" type="application/atom+xml" title="Atom" href="{% url "blog_post_feed" "atom" %}">
{% endifinstalled %}
{% compress css %}
<link rel="stylesheet" href="{% static "css/mezzanine.css" %}">
{% ifinstalled cartridge.shop %}
<link rel="stylesheet" href="{% static "css/cartridge.css" %}">
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="{% static "css/cartridge.rtl.css" %}">
{% endif %}
{% endifinstalled %}
<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" href="{% static "css/custom.css" %}">
{% block extra_css %}{% endblock %}
{% endcompress %}
{% compress js %}
<script src="https://js.stripe.com/v3/"></script>
<script src="{% static "mezzanine/js/"|add:settings.JQUERY_FILENAME %}"></script>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
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>
{% block extra_js %}{% endblock %}
{% endcompress %}
<!--[if lt IE 9]>
<script src="{% static "js/html5shiv.js" %}"></script>
<script src="{% static "js/respond.min.js" %}"></script>
<![endif]-->
{% block extra_head %}{% endblock %}
</head>
<body id="{% block body_id %}body{% endblock %}">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">{{ settings.SITE_TITLE }}</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
{% page_menu "menus/dropdown.html" %}
</div>
</div>
</nav>
<!-- Page Content -->
{% block main %}
{% endblock %}
<!-- /.container -->
{% block footer_js %}
{% include "includes/footer_scripts.html" %}
{% endblock %}
</body>
</html>
Ok I know this question has been asked before, I looked at the answers and (think) I am doing exactly what is supposed to be done, but the search box is only appearing on the 'search' page and not any other page. I have a base.html that I use to extend to all other pages, can anyone help out on this? (FYI, I did try having the form in base.html instead of search.html but that did not work either)
Base.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Search</title>
<link href="{% static 'css/bootstrap3.min.css' %}" rel="stylesheet">
<link href="{% static 'css/main.css' %}" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="clearfix">
{% include 'navbar.html' %}
<h3 class="text-muted">My site</h3>
</header>
<hr>
{% block content %}{% endblock %}
<hr>
<footer>
<p class="text-muted">Copyright © 2015</p>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
Search.html
{% extends 'base.html' %}
{% load staticfiles %}
{% load widget_tweaks %}
{% block content %}
<h2>Search</h2>
<form method="get" action=".">
<div class="input-group">
{% render_field form.q class+="form-control" type="search" %}
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Search</button>
</span>
</div>
{% if query %}
<h3>Results</h3>
{% for result in page.object_list %}
<div class="media">
<div class="media-left">
<img class="media-object" height="100"
style="border: 1px solid #ccc;"
src="{{ result.object.photo.url }}">
</div>
<div class="media-body">
<h4 class="media-heading">Supplier Part Code: <strong>{{ result.object.supplier_code }}</strong></h4>
<h4>Mfr Code: <strong>{{ result.object.part.code }}</strong></h4>
<p>
<strong>Supplier</strong> {{ result.object.supplier.name }}
<strong>Price</strong> {{ result.object.price }}
<strong>Sale Price</strong> {{ result.object.sale_price }}
<strong>Available</strong> {{ result.object.quantity }}
Buy Now!
</p>
</div>
</div>
{% empty %}
<p>No results found.</p>
{% endfor %}
{% if page.has_previous or page.has_next %}
<div>
{% if page.has_previous %}{% endif %}« Previous{% if page.has_previous %}{% endif %}
|
{% if page.has_next %}{% endif %}Next »{% if page.has_next %}{% endif %}
</div>
{% endif %}
{% else %}
{# Show some example queries to run, maybe query syntax, something else? #}
{% endif %}
</form>
{% endblock %}
Manuals.html (No Search bar displays)
{% extends 'base.html' %}
{% load staticfiles %}
{% block content%}
<h1>Hello and welcome to Manuals</h1>
{% endblock %}
URL patterns
url(r'^search/', include('haystack.urls')),
url(r'^manuals/$', 'mysite.views.manuals', name='manuals'),
I have a base template that includes another template for a drop down menu. If I hard code items for the li tag, it works fine. If I try to pass the objects.all(), it doesn't fill. Here's my setup:
Model
class Category(models.Model):
name = models.CharField(max_length=40, blank=True)
def __unicode__(self): # Python 3: def __str__(self):
return self.name
View
def dropdown_cats(request):
cats = Category.objects.all()
return render(request, 'home/dropdown-cats.html', {'cats': cats})
home/base.html
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="{% static 'media/logo.png' %}">
<title>something.com</title>
<!-- Bootstrap core CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="{% static 'dist/css/bootstrap.css' %}" type="text/css" media="screen" />
<link href="{% static 'dist/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
<!-- Custom CSS -->
<link href="{% static 'dist/css/custom.css' %}" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="site_wrapper" class="clearfix">
<!-- Above-Nav
================================================== -->
<div class="above-nav visible-desktop">
<div class="container" style="text-align:center;">
</div>
</div>
<!--END above-nav
================================================== -->
<!-- Navbar ==================================== -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href={{home}}>something.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{% block navbar %}
{% endblock navbar %}
</ul>
</div>
</div><!--/.nav-collapse -->
</div><!-- navbar-inner -->
</div>
<!-- End Navbar =================================== -->
<!-- Start Grid layout ============================ -->
<!--<div class="container-fluid">-->
<div class="container-fluid">
<div class="row" style="text-align:center">
<div class="col-xs-3"><h2>My Most Recent Blogs</h2>
{% block left_side %}
{% endblock left_side %}
</div>
<div class="col-xs-6">
{% block middle %}
{% endblock middle %}
</div>
<div class="col-xs-3"><h2>Links</h2>
{% block right_side %}
{% endblock right_side %}
</div>
</div>
</div>
<!-- End Grid Layout ====================== -->
</div>
<!-- close the wrapper ====================== -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="{% static 'dist/js/bootstrap.min.js' %}"></script>
</body>
</html>
home/home.html
{% extends "home/base.html" %}
{% block navbar %}
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Categories<span class="caret"></span>
{% include 'home/dropdown-cats.html' %}
</li>
<li>Previous Blogs</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
{% endblock navbar %}
{% block left_side %}
{% endblock left_side %}
{% block middle %}
{% endblock middle %}
{% block right_side %}
{% endblock right_side %}
home/dropdown-cats.html
<ul class="dropdown-menu">
{% if cats %}
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% endfor %}
{% else %}
<li>BAD TEST</li>
{% endif %}
</ul>
If I test this by replacing the url tag in the for loop with something similar like GOOD TEST, there's still nothing inserted because cats is empty. All I get is one drop down entry "BAD TEST". I've used the shell to ensure Category.objects.all() returns the list as of categories as it should.
No idea how that Post statement got in the view there. Must have accidentally pasted it it. Anyways, I've excluded it from the view and included all my html for more details. I THINK I understand what you're saying Daniel, but I'm a bit confused. Isn't this how the tutorial modifies templates, by including it in the render parameters: render(request, 'template.html', dicts)
You don't really show enough information here, but I suspect you're getting confused about templates and views. Simply including another template doesn't "call" another view: the only thing that calls views is the URL handler. Templates themselves don't know anything about views.
If you want to dynamically add context for another template, you need to make it into a custom inclusion tag.
Replace the snippet in your Template with:
<ul class="dropdown-menu">
{% for cat in cats %}
<li>{{ cat.name }}</li>
{% empty %}
<li>BAD TEST</li>
{% endfor %}
</ul>
The above will definitely work as long as the cats queryset as set in your View code has 1 or more items. The for .. empty template tag used in the template code above is documented here.