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'),
Related
I am creating a login page without an inbuilt model form. I am using FormAPI of Django and followed all the steps to add a class attribute to the input fields of my form. But it still looks like a basic form without bootstrap.
forms.py:
#Login Form
class LoginForm(forms.Form):
username=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
password=forms.CharField(widget=forms.PasswordInput(attrs={'class':'form-control'}))
Base template file to be inherited:
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="{% static 'account/images/logo.ico' type='image/x-icon' %}">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'account/css/style.css' %}">
<title>{% block title %}{% endblock title %}</title>
</head>
<body class="forbody">
<div class="container trp" style="margin-top: 2%; display: inline-block;">
<div class="row">
<div class="col-md-4">
<img src="{% static 'account/images/Logo.png' %}" alt="Logo" style="height: 60%; width: auto;">
</div>
</div>
</div>
<div class="container" style="width: 40%; margin-top: 10%;">
<div class="container" style="width: auto; margin-top: 8%;">
<div class="container" style="background-color: #696969; height: auto; width: auto; margin-top: 8%;">
<div class="row">
<div class="col-lg-6" style="padding-top: 25px; padding-bottom: 20px; padding-left: 20px;">
<form action="" method="post" novalidate>
{% csrf_token %}
{% block formcontent %} {% endblock formcontent %}
<div class="row text-center">
<div class="col-lg-12">
{% block loginbtn %} {% endblock loginbtn %}
</div>
</div>
<div class="row text-center">
<div class="col-lg-12" style="padding-top: 10px; padding-bottom: 12px;">
{% block outerlink %} {% endblock outerlink %}
{% block messages %} {% endblock messages %}
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
</body>
</html>
Actual login template:
{% extends 'account/forms_base.html' %}
{% block title %}Log-in{% endblock title %}
{% block formcontent %}
{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
{{error}}
{% endfor %}
{% endif %}
{% for fm in form %}
{{fm.label_tag}} {{fm}} {{fm.error|striptags}} <br><br>
{% endfor %}
{% endblock formcontent %}
{% block loginbtn %}
<input class="submitbtn" type="submit" value="Login">
{% endblock loginbtn %}
{% block outerlink %}
<small style="margin-top: 5px;">To register Click Here</small>
{% endblock outerlink %}
{% block messages %}
{% if messages %}
{% for message in messages %}
<span {% if message.tags %} class="{{message.tags}}" {% endif %}>{{message}}</span>
{% endfor %}
{% endif %}
{% endblock messages %}
Where am I going wrong here? When I view the source page on the browser, the class attribute does not show at all!
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>
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 %}
I would like to show the number of unreaded msgs in User Panel Box which will appear everytime when user is logged in.
How to pass the number of msg from controler to the user panel box which is included in base layout?
I can't use routes for that because the panel appears on all pages (index as well).
Now i'm sending it using global session but i think it could be done better. Any clues ?
Controler:
if(isset($_SESSION['user_id'])){
$unreaded=Model::factory('Message')->filter('getUnreadedGroups',$_SESSION['user_id']);
$_SESSION['unreaded']=$unreaded->opened;}
Base layout
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/css/reset.css" />
<link rel="stylesheet" href="/css/style.css" />
<title>{% block page_title %} {% endblock %}</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.scripts.js"></script>
</head>
<body>
<div id="all">
<div id="top-container">
<div id="logo">test</div>
<div id="search-box"></div>
</div>
<div id="left-side">
<div class="menu">
<ul>
<li class="nav_dashboard active">Strona główna</li>
<li class="nav_graphs">Wzory</li>
<li class="nav_forms">Najnowsze</li>
<li class="nav_typography">Najlepiej oceniane</li>
</ul>
</div>
</div>
<div id="page">
{% block content %} {% endblock %}
</div>
<div id="right-side">
<div id="login-container">
{% if session.user_id is defined %}
{% include 'user_panel.php' %}
{% else %}
{% include 'login_form.php' %}
{% endif %}
</div>
</div>
</div>
</body>
</html>
User Panel Box
<div class="login-top" id="login-form-top">
<div id="welcome">Witaj, <span>John Doe</span></div>
<p id="last-login">Ostatnie logowanie:</p>
<div id="logout-msg-container">
<div class="logut">Wyloguj</div>
<a id="msg-number" href="/profil/wiadomosci">
<span class="number">
{% if session.unreaded >0 %}
{{ session.unreaded }}
{% else %} 0
{% endif %}
</span>
</a>
</div>
</div>
<div class="menu">
<p class="header">Profil użytkownika</p>
<ul>
<li>Twoje Dane</li>
<li>Twoje zbiory</li>
<li>Twoje wiadomości</li>
</ul>
</div>
Typical template
{% extends 'layout.php' %}
{% block page_title %}Najnowsze pliki{% endblock %}
{% block content %}
<div id="page-top">
<h1>Najnowsze</h1>
<p>+ <span class="blue">12</span> wzorów</p>
</div>
<div id="main-topvote">
<div class="title">Najnowsze<span>( ostatni tydzień )</span></div>
<div class="content">
{% for file in files %}
<p>{{ file.idFile }}<br/> {{ file.date_add }}<br/> {{ file.desc }}<br/> {{ file.title }}<br/><br/></p>
{% else %}
<p>There are currently no articles.</p>
{% endfor %}
</div>
</div>
{% endblock %}
I havent tested this ( https://github.com/fabpot/Twig/issues/293 ):
Base layout:
...
<div id="right-side">
{% block side %}
{% block side-login %}
{% if session.user_id is defined %}
{% include 'user_panel.php' %}
{% else %}
{% include 'login_form.php' %}
{% endif %}
{% endblock %}
{% endblock %}
</div>
...
Typical template:
...
{% block side %}
{% set count = 12 %}
{% block side-login %}
{{ parent() }}
{% endblock %}
{% endblock %}
...
So you can use {{count}} in your User Panel Box.
You can also try to skip the side-login block definition .. but i am not sure.