i try to add the Select2 in my django app but i can't use it. What i do wrong ?
Anyone have a solution ?
page.html
<!----Select2----->
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<!----Select2----->
<script>
$(document).ready(function() {
$('#id_employe').select2();
});
</script>
Filter from the form
======== Configuration in 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 href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<title>
{% block title %}
{% endblock title %}
</title>
</head>
<body>
{% block body %}
{% endblock body %}
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
// In your Javascript (external .js resource or <script> tag)
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
</body>
</html>
============ select dropdown in index.html =========
{% extends "base.html" %}
{% block title %}
Index | Page
{% endblock title %}
{% block body %}
<h3>Single select </h3>
<select class="js-example-basic-single" name="state" style="width: 200px;">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h3>Multi select</h3>
<select class="js-example-basic-multiple" name="states['home']" multiple="multiple" style="width: 200px;">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
{% endblock body %}
======= single select =========
======= multiple select ==============
Related
I was following one chatbot tutorial using Django, I came across this error:
frontpage.html
{% extends 'core/base.html' %}
{% block title %}Welcome | {% endblock %}
{% block content %}
<div class="p-10 lg:p-20 text-center">
<h1 class="text-3xl lg:text-6xl text-white">Djangochat</h1>
</div>
{% endblock %}
base.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> {% block title %}{% endblock %}Django </title>
<script src="https://cdn.tailwindcss.com" ></script>
<body class="bg-teal-600">
<nav class="flex items-center justify-between px-4 py-6 bg-teal-800">
<div>
Djangochat
</div>
<div class="flex items-center space-x-4">
Log in
Sign up
</div>
</nav>
{% block content %}
{% endblock %}
</head>
</body>
</html>
Output
enter image description here
So, {% block title %} {% end block %} is not working, kindly help.
Change the title to this on base.html
<title>{% block title %}my base page{% endblock %}</title>
Then go to frontpage.html or any page you want to
<title>{% block title %}my front page{% endblock %}</title>
As mentioned in the official documentation The Django template language
EDIT
You're mistaken about the form of HTML the close tag of the head in the body
Try this:
<!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">
<title> {% block title %}{% endblock %}Django </title>
<script src="https://cdn.tailwindcss.com" ></script>
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
I am using Django 3.2
This is my base template (snippet):
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content={% block page_description %}""{% endblock page_description %}>
<meta name="keywords" content={% block page_keywords %}""{% endblock page_keywords %}>
<link rel='icon' href='{% static "img/favicon.ico" %}' type='image/x-icon'/ >
<title>{% block page_title %}Demo{% endblock page_title %}</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C500%2C600%2C700%7CPlayfair+Display%7CRoboto%7CRaleway%7CSpectral%7CRubik">
<link rel="stylesheet" href="{% static 'css/footer.css' %}">
<link rel="stylesheet" href="{% static 'css/header.css' %}">
{% block head_styles %}
{% endblock head_styles %}
{% block head_js %}
{% endblock head_js %}
</head>
<body>
{% block header %}
{% include "partials/header.html" %}
{% endblock header %}
{% block messages %}
{% include 'partials/messages.html' %}
{% endblock messages %}
<!-- Page Content -->
<div class="d-flex flex-column sticky-footer-wrapper">
{% block content %}
{% endblock content %}
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
{% block footer %}
{% include 'partials/footer.html' %}
{% endblock footer %}
{% block body_js %}
{% endblock body_js %}
<script>
$().ready(function() {
});
</script>
</body>
</html>
/path/to/header.html
{% load static %}
<!-- Header -->
<header id="js-header" class="u-header u-header--static">
<!-- ... # snipped -->
<form action="/action_page.php" method="GET">
<button id="btn-submit-item" type="submit" class="btn" style="margin-right: 10px;border: 1px solid #CACACA;">Submit</button>
</form>
{% if not user.is_authenticated %}
<a class="btn btn-success btn" href="#" role="button">Sign In</a>
{% else %}
<a class="nav-link text-dark" href="#">{{ user.username }}</a>
{% endif %}
</ul>
</div>
<!-- End Navigation -->
</div>
</nav>
</div>
</header>
<!-- End Header -->
{% block body_js %}
<script>
$().ready(function(){
$( "#btn-submit-item" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
{% endblock body_js %}
In rendered page HTML, I get something like this:
# ...
<!-- End Header -->
<script>
$().ready(function(){
$( "#btn-submit-photo" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
# ...
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Site footer -->
The placement is in the wrong place - so the JQuery operator $ is attempting to be used - BEFORE the JQuery library is loaded - hence the error.
My question is - why is Django rendering the block in the wrong place - and how do I fix this error?
You're rendering header.html in {% block header %} which is added before the jquery script. Therefore, $ is undefined.
Solution 1:
Move the jquery include to the <head></head> of your html, like you did with the bootstrap.min.css file.
Solution 2:
If you want to have your jquery loaded just before the body closing tag (</body>), you should move your inline jquery to a .js file and include that after including jQuery. For example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"
integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g=="
crossorigin="anonymous"></script>
<script src="your_script.js"></script>
</body>
Read more about django and static files here: https://docs.djangoproject.com/en/3.2/howto/static-files/
When I use {% extends 'base.html' %} my navbar displays correctly but when I use {% block content %} Hello World{% endblock content %} my navbar disappears and I only see the text "Hello World". I dont really know what to try it appeared to be straight forward but apparently it isn't until you actually know.
{% extends "base.html" %}
{% block content %}<h1>Hello World</h1>{% endblock content %}
My 'base.html' file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% endblock %}
</body>
Change your base.html to the one below. What is happening is you are overwriting your content block with whats in your template ("Hello world"). If you want to stick with this, in your child template, put {{block.super}} after {% block content %}, but the "correct" way would be to change your base.html with the one below.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>my title goes here</title>
{% endblock %}
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col">
<nav class="navbar custom-navbar">
<h1>World Truthers</h1>
<div class="col navbar-buttons">
<button class="btn custom-button"><p><b>Contact</b></p></button>
<button class="btn custom-button"><p><b>About</b></p></button>
<button class="btn custom-button"><p><b>Returns</b></p></button>
<button class="btn custom-button"><p><b>Payment</b></p></button>
<button class="btn custom-button"><p><b>Delivery</b></p></button>
<button class="btn custom-button"><p><b>Store</b></p></button>
</div>
</nav>
</div>
</div>
</div>
{% block content %}
{% endblock %}
</body>
I've been trying to render a html template with a python dictionary.
Actually I created a sitemap for my webpage and implemented it with the {{%extends%}} tag. The solution I wanted to reach is to create a dictionary for each website which can be reached with CherryPy and render it with Jinja. The process is the following:
I create a dictionary with the needed variables
pass the dictionary to an extra function which appends the dictionary with the static variables (sitemap).
The first solution I tried to is converting the dictionary into a string and return the string and render it.
import cherrypy
import os
from jinja2 import Environment, FileSystemLoader
BASE_PATH = os.path.dirname(os.path.abspath(__file__))+"\\static"
print BASE_PATH
env = Environment(loader=FileSystemLoader(BASE_PATH))
class Main(object):
def __init__(self):
self.sites = {"main": "index",
"leroy": "leroy"}
def render_pages(self, template, dict):
dictItemCount = len(dict)
dictPosition = 1
string=""
for current in dict:
if(dictPosition == dictItemCount):
print 'last item in dictionary'
string += str(current)+"="+"'"+str(dict[current])+"'"
break
dictPosition += 1
string += str(current)+"="+"'"+str(dict[current])+"', "
return template.render(>>>PROBLEM HERE<<<)
#cherrypy.expose
def leroy(self):
tmpl = env.get_template('leroy.html')
jahre = 24
monate = jahre*12
tage = monate*30
stunden = tage*24
minuten = stunden*60
sekunden = minuten*60
variables = {jahre: jahre,
monate: monate,
tage: tage,
stunden: stunden,
sekunden: sekunden}
#tmpl.render(sites=self.sites, jahre=jahre, monate=monate, tage=tage, stunden=stunden, minuten=minuten, sekunden=sekunden)
return Main.render_pages(self, tmpl, variables)
cherrypy.quickstart(Main(), '/', "conf/cherrypy.conf")
-------------------> EDIT <-------------------
Here is the 'leroy.html' template:
{% extends "base.html" %}
{% block title %}{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<p class="important">
Jahre: {{jahre}} <br />
Monate: {{monate}} <br />
Tage: {{tage}} <br />
Stunden: {{stunden}} <br />
Minuten: {{minuten}} <br />
Sekunden: {{ sekunden }}
</p>
<br /><br />
{% endblock %}
'base.html':
{% block head %}
<!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>{% block title %}{% endblock %} - TEST </title>
<!-- Bootstrap -->
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
{% endblock %}
{% block content %}
<body>
{% endblock %}
{% block footer %}
<br /><br />Sitemap:
<ul id="sitemap">
{% for site in sites %}
<li>{{site}}</li>
{% endfor %}
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>
{% endblock %}
The comment from #jwalker solved my problem:
You don't need to convert it to a string, just pass the dict to template.render()
When I use {% extends %} tag its not pulling through my standard html. Is there something am missing am new to Django template tags. I want to add the Standard,html into my index.html file which also resides in the templates folder.
My index file in the template folder:
{% extends "Standard.html" %}
{% block maincontent %}
{% block headcontent %}
<link rel="stylesheet" type="text/css" href="/media/css/Panels.css" />
<link rel="stylesheet" type="text/css" href="/media/css/HostOverview.css" />
{% endblock %}
<script>
function disaT(c,f){
if(c.checked){f.txt1.disabled=false;
f.submit.disabled=false;
}
else{f.txt1.disabled=true;
f.submit.disabled=false;
}
}
</script>
<style>
a:link {
color: #39F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #63C;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #000;
}
</style>
<div style="display:none" id="dialog" title="Disable Your Account?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This will disable your account and log you out. You won't be able to log back in. Are you sure you want to continue?</p>
</div>
<h1></h1>
<form name="logger" action="" method="post">
<label>Input : </label><textarea name="txtexec" id="txtexec" cols="50"/>{{ txtexec }}</textarea> <input type="submit" name="execute" value="Execute" /><br /><br />
<label>Pattern Input : </label><input name="txtpattern" id="txtpattern" type="text" size="100" value="{{ txtpattern }}" /><br />
<label>Result : </label><br />
</form>
<P>Discover</P>
<pre>
{{ file_content }}
</pre>
<P>Console output</P>
<pre>
{{ Output_content }}
</pre>
<form name="checkin_form" action="#" method="post" enctype="multipart/form-data"><br><br>
Full pattern : <span style="color:#000; font-size:10px; background:#CCC;" >{{ session_fullpattern }}</span><br><br>
<label>Check In : </label><input type="checkbox" onclick="disaT(this,this.form)"><br>
<label>Enter pattern name : </label><input name="txt1" type="text" disabled="true"> <input type="submit" name="submit" value="Submit" disabled="true" />
</form>
<div style="clear:both;" />
{% endblock %}
My standard.html page:
{% extends "Base.html" %}
{% block head %}
<link rel="stylesheet" type="text/css" href="/media/css/Standard.css" />
<link rel="stylesheet" type="text/css" href="/media/css/Menu.css" />
<link rel="stylesheet" type="text/css" href="/media/css/Tooltip.css" />
<link rel="Stylesheet" type="text/css" href="/media/css/custom_theme/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="/media/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery-ui-personalized-1.6rc6.min.js"></script>
{% block headcontent %}{% endblock %}
{% endblock %}
You're nesting blocks inside each other, which is rarely the right thing to do.
Your index.html should start like this:
{% extends "standard.html" %}
{% block headcontent %}
<link rel="stylesheet" type="text/css" href="/media/css/Panels.css" />
<link rel="stylesheet" type="text/css" href="/media/css/HostOverview.css" />
{% endblock %}
{% block maincontent %}
... etc
but then you also need a place for maincontent to go in standard.html:
{% extends "Base.html" %}
{% block head %}
.... content ...
{% endblock %}
{% block headcontent %}{% endblock %}
{% block maincontent %}{% endblock %}
Your inheritance and naming is way of. Examine the template language documentation. The example below should give you an idea aswell.
base.html
<html>
<head>
<!-- this will always be inherited -->
{% block head %}
<!-- this can be overruled -->
{% endblock %}
</head>
<body>
<!-- this will always be inherited -->
{% block body %}
<!-- this can be overruled -->
{% endblock %}
</body>
</html>
page.html
{% extends "base.html" %}
{% block head %}
<!-- Hello I am overwriting the base head, but not touching it's body. -->
{% endblock %}