I add bootstrap_datepicker_plus to my code. In my template, I can see the calendar button on the right side of my field but when I click on the button nothing happened
try to modify settings, and template organization but nothing changes
Hi thanks for that. I still an issue, button on the right side to select date in the template is not working. I click on it but nothing..
this is the code modified:
in setting.py
# needed for using bootstrap_datepicker_plus
BOOTSTRAP3 = {
'include_jquery': True,
}
and add 'bootstrap_datepicker_plus', in installed apps
html file:
{% extends 'imports/base.html' %}
{% load bootstrap3 %}
<!-- necessaire pour date picker -->
{% block extra_css %}
{{ form.media.css }}
{% endblock %}
{% block extra_js %}
{{ form.media.js }}
{% endblock %}
<!-- Fin date picker -->
{% block title %}Imports Company{% endblock %}
{% block heading %}<h3 class="page-header-center">Creation Company</h3> {% endblock %}
<hr>
<hr>
{% block page %}
<form method="POST">
{% csrf_token %}
<div class="col-lg-4 col-md-4 col-sm-4 content">
{% bootstrap_form company_form %}
<button type="submit" class="btn btn-pink pull-right">Create</button>
</div>
</form>
{% endblock %}
imports/base.html:
{% load staticfiles %}
{% load bootstrap3 %} {# import bootstrap4/bootstrap3 #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Necessaire pour bootstrap datepicker -->
{% bootstrap_css %} {# Embed Bootstrap CSS #}
{% block extra_css %}
{{ form.media.css }}
{% endblock %}
<!-- fin du code boots trap datepicker -->
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 sidebar">
{% block sidebar %}{% endblock %}
</div>
<div class="col-lg-10 col-lg-offset-2 col-md-10 col-md-offset-2 col-sm-10 col-sm-offset-2 content">
{% block heading %}{% endblock %}
{% block page %}{% endblock %}
</div>
</div>
</div>
<!-- Necessaire pour bootstrap datepicker -->
{% bootstrap_javascript jquery='full' %} {# Embed Bootstrap JS+jQuery #}
{% block extra_js %}
{{ form.media.js }}
{% endblock %}
<!-- fin du code boots trap datepicker -->
</body>
</html>
and
forms.py:
class CompanyForm(forms.ModelForm):
class Meta:
model = Company
fields = ("company_name", "fiscal_end_of_year")
widgets = {
'fiscal_end_of_year': DatePickerInput(), # default date-format %m/%d/%Y will be used
}
models.py:
class Company(models.Model):
company_id = models.IntegerField(default=170)
company_name = models.CharField(max_length=100, null=False)
fiscal_end_of_year = models.DateField()
I missed something but where :-) ?
Expects to see calendar when clicking on the button
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 have the following three files in a Django App, with the template engine being Jinja2
skeleton.html
<head>
{% block head_content %}
<meta charset="utf-8">
<title> {% if page_title %} {{ page_title }} | {% endif %} Bhargavi Books & Stationery </title>
<link rel="stylesheet" href="{{ static("css/semantic.min.css") }}">
<link rel="stylesheet" href="{{ static("Icons/font-awesome.min.css") }}">
{% endblock head_content %}
</head>
<body>
<div id="navigation">
{% block navigation %}
<div class="ui three item menu">
<a class="active item">Home</a>
<a class="item">New Bill</a>
<a class="item">View Bills</a>
</div>
{% endblock navigation %}
</div>
<div id="frame">
{% block frame_content %}
<p> Body content goes here. Body for {{ content_name }}</p>
{% endblock frame_content %}
</div>
<div id="app">
{% block app_content %}
<p> APP content goes here. Body for {{ content_name }}</p>
{% endblock app_content %}
</div>
{% block scripts %}
<script src="{{ static("js/jquery.js") }}"></script>
<script src=" {{ static("js/semantic.min.js") }} "></script>
{% endblock scripts %}
</body>
base.html
{% extends "skeleton.html" %}
{% from "macros/globalmacros.html" import
SUIIconList,SUISimpleList,
SUIImageLabel,SUILabel,
SUIActionInput,SUILabeledInput,SUIInput,
SUIDimmableActionCard,SUICard,
%}
{% block frame_content %}
Frame Content
{% endblock frame_content %}
{% block scripts %}
{{ super() }}
<script src=" {{ static("js/globalmacros.js") }} "></script>
{% endblock scripts %}
dashboard.html
{% extends "base.html" %}
<div>
{% block body_content %}
Body 3
{% endblock body_content %}
</div>
<div>
{% block app_content %}
DASHBOARD
{% endblock app_content %}
</div>
In this setup, Jinja renders everything except the "DASHBOARD" in the final page. However, when I add an empty block in "base.html", like so..
{% block app_content %}
App content Goes here...
{% endblock app_content %}
In the final template, "DASHBOARD" is printed. Is this some quirk in Jinja? Is this behavior defined in any docs??
I understand your issue: you've got template A, template B (extends template A), and template C (extends template B). There's a block defined in template A, but it's not showing up in the page that uses template C, unless you define that block in template B. If you do that, then the block in question shows up.
First: you are correct in your understanding that this is not how the Jinja template hierarchy is supposed to work. Second, I did not encounter your issue (found a different one, though), and I have constructed a proof to demonstrate this. Here's what I did (again, using Python 3 and Django 1.11):
$ python startproject myapp
In the myapp/myapp/settings.py file, I updated the template engine:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.jinja2.Jinja2',
'DIRS': [
os.path.join(BASE_DIR, 'myapp/templates') # hack / should add `myapp` to INSTALLED_APPS instead
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
In myapp/myapp/urls.py, I created a dummy view function & route:
from django.conf.urls import url
from django.shortcuts import render_to_response
def home(request):
return render_to_response('dashboard.html')
urlpatterns = [
url(r'^$', home),
]
And finally, I established those templates, but I removed the call to import your macros, along with all instances of static().
Here is the myapp/myapp/templates/skeleton.html file:
<!doctype html>
<html lang="en">
<head>
{% block head_content %}
<meta charset="utf-8">
<title> {% if page_title %} {{ page_title }} | {% endif %} Bhargavi Books & Stationery </title>
{% endblock head_content %}
</head>
<body>
<div id="navigation">
{% block navigation %}
<div class="ui three item menu">
<a class="active item">Home</a>
<a class="item">New Bill</a>
<a class="item">View Bills</a>
</div>
{% endblock navigation %}
</div>
<div id="frame">
{% block frame_content %}
<p> Body content goes here. Body for {{ content_name }}</p>
{% endblock frame_content %}
</div>
<div id="app">
{% block app_content %}
<p> APP content goes here. Body for {{ content_name }}</p>
{% endblock app_content %}
</div>
{% block scripts %}
{% endblock scripts %}
</body>
</html>
Here is the myapp/myapp/base.html file:
{% extends "skeleton.html" %}
{% block frame_content %}
Frame Content
{% endblock frame_content %}
{% block scripts %}
{{ super() }}
{% endblock scripts %}
And here is the myapp/myapp/templates/dashboard.html file:
{% extends "base.html" %}
<div>
{% block body_content %}
Body 3
{% endblock body_content %}
</div>
<div>
{% block app_content %}
DASHBOARD
{% endblock app_content %}
</div>
And here is the output, after viewing that page in my browser:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Bhargavi Books & Stationery </title>
</head>
<body>
<div id="navigation">
<div class="ui three item menu">
<a class="active item">Home</a>
<a class="item">New Bill</a>
<a class="item">View Bills</a>
</div>
</div>
<div id="frame">
Frame Content
</div>
<div id="app">
DASHBOARD
</div>
</body>
</html>
Since this all works as expected*, my conclusion is that you might have a problem with the base.html template file. Perhaps it's failing to import your macros, and subsequently not behaving correctly? I notice a trailing comma in there, and I'm not sure if that could be problematic or not. I would suggest using the above code as a starting point, and then slowly add back in the parts that I stripped out, and perhaps the problem will become visible/understandable.
*One thing I found odd, that I don't understand: the body_content block is completely missing from my output, unless I define that block in the skeleton.html template. It doesn't work if I define it in the base.html template, which seems wrong to me, because then we're not really extending that second template (base.html)... so there does seem to be something weird there... but I was not able to encounter the original issue you described, so maybe this will be helpful in that particular regards, at least.
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 %}
So I am creating a page in my Django project that essentially just uses the Django admin app header and footer.
I have a template folder in the root of my project where I have my base.html.
/templates/admin/base.html
{% load i18n static %}<!DOCTYPE html>
{% load static %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'js-stack/assets/css/spark-styles.css' %}" />
<link rel="stylesheet" type="text/css" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}" />
{% block extrastyle %}{% endblock %}
{% if LANGUAGE_BIDI %}<link rel="stylesheet" type="text/css" href="{% block stylesheet_rtl %}{% static "admin/css/rtl.css" %}{% endblock %}" />{% endif %}
{% block extrahead %}{% endblock %}
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
</head>
{% load i18n %}
<body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
data-admin-utc-offset="{% now "Z" %}">
<!-- Container -->
<div id="container">
{% if not is_popup %}
<!-- Header -->
<div id="header">
<div id="branding">
{% block branding %}{% endblock %}
</div>
{% block usertools %}
{% if has_permission %}
<div id="user-tools">
{% block welcome-msg %}
{% trans 'Welcome,' %}
<strong>{% firstof user.get_short_name user.get_username %}</strong>.
{% endblock %}
/ View Analytics /
{% block userlinks %}
{% if site_url %}
{% trans 'View site' %} /
{% endif %}
{% if user.is_active and user.is_staff %}
{% url 'django-admindocs-docroot' as docsroot %}
{% if docsroot %}
{% trans 'Documentation' %} /
{% endif %}
{% endif %}
{% if user.has_usable_password %}
{% trans 'Change password' %} /
{% endif %}
{% trans 'Log out' %}
{% endblock %}
</div>
{% endif %}
{% endblock %}
{% block nav-global %}{% endblock %}
</div>
<!-- END Header -->
{% block breadcrumbs %}
<div class="breadcrumbs">
{% trans 'Home' %}
{% if title %} › {{ title }}{% endif %}
</div>
{% endblock %}
{% endif %}
{% block messages %}
{% if messages %}
<ul class="messagelist">{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message|capfirst }}</li>
{% endfor %}</ul>
{% endif %}
{% endblock messages %}
<!-- Content -->
<div id="content" class="{% block coltype %}colM{% endblock %}">
{% block pretitle %}{% endblock %}
{% block content_title %}{% if title %}<h1>{{ title }}</h1>{% endif %}{% endblock %}
{% block content %}
{% block object-tools %}{% endblock %}
{{ content }}
{% endblock %}
{% block sidebar %}{% endblock %}
<br class="clear" />
</div>
<!-- END Content -->
{% block footer %}<div style="padding: 10px 40px;" id="footer"><img src="{% static 'wifispark-logo.png' %}"></div>{% endblock %}
</div>
<!-- END Container -->
</body>
</html>
So this is a copy of the admin app base.html, but with a few modificatio0ns such as an image in the footer. This is all working as expected when I log into the admin app.
I also have another app called 'analytics' inside my project. Below is the template for it where I have extended the admin/base.html.
{% extends "admin/base.html" %}
{% load static %}
{% block content %}
<div class="container-fluid">
</div>
{% endblock content %}
Now, when I view my analytics page it loads with all the expected header and footer styling from the admin/base.html, but there is content missing such as the admin app title and the menu links, both of which are pulled through from admin app template tags.
Can anyone shed any light on what I am doing wrong or am missing?
Many thanks,
James
In your View, the one that renders the analytics page make sure you pass user, site_header, has_permission, and site_url as parameters.
These parameters can be extracted like this:
from django.contrib.admin import AdminSite
class MyAdminSite(admin.AdminSite):
pass
mysite = MyAdminSite()
And then return them while rendering your template:
def get(self, request):
return render(request, 'analytics.html', {'user': request.user,'site_header': mysite.site_header,'has_permission': mysite.has_permission(request), 'site_url': mysite.site_url})
Hope that helps
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.