it is my layout.html
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<title>Mikayıl`ın Bloğu</title>
</head>
<body>
{% include "includes/navbar.html" %}
<div style = "margin-top : 100px; margin-bottom:100px;" class = "container">
{% include "includes/messages.html" %}
{% block body %}
{% endblock body %}
</div>
<script src="{% static 'js/jquery-3.2.1.min.js'%} "></script>
<script src="{% static 'js/bootstrap.min.js'%} "></script>
<script>
$(document).ready(function() {
// messages timeout for 10 sec
setTimeout(function() {
$('.message').fadeOut('slow');
}, 10000); // <-- time in milliseconds, 1000 = 1 sec
// delete message
$('.del-msg').live('click',function(){
$('.del-msg').parent().attr('style', 'display:none;');
})
});
</script>
</body>
</html>
and it is my message.html this file is intor the folder in templates/includes but i added this into layout.html to
{% if messages %}
{% for message in messages %}
{% if message.tags == "info" %}
<div class="alert alert-danger">{{ message }}</div>
{% else %}
<div class="alert alert-{{ message.tags }}">{{ message }}</div>
{% endif %}
{% endfor %}
{% endif %}
i looked stackoverflow there was topic same as me i tried but i couldnt reach my goal
but i cant make succes message which one disappear after 5 second who can help me :)
Class names are different in your js and html parts, just change .message to .alert to work.
Related
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/
Console:
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 6: 'blосk'. Did you forget to register or load this tag?
Basic.html
[<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>{% blосk title %}Главная{% endblock %} - Доска объявлений</title>
</head>
<body>
<header>
<hl>Объявления</hl>
</header>
<nav>
<а href="{% url 'index' %}">Главная</а>
<а href="{% url 'add' %}">Добавить</а>
{% for rubric in rubrics %}
<а href="{% url 'by_rubric' rubric.pk %}">{{ rubric.name }}</а>
{% endfor %}
</nav>
<section>
{% blосk content %}
{ % endblock % }
</section>
</body>
</html>][2]
index.html
{% extends "layout/basic.html" %}
{% block content %}
{% for bb in bbs %}
<div class="b">
<h2>{{ bb.title }}</h2>
<p>{{ bb.content }}</p>
<p><a href='{% url "by_rubric" bb.rubric.pk %}'>{{bb.rubric.name}}</a></p>
<p>{{ bb.published|date:"d.m.Y H:i:s" }}</p>
</div>
{% endfor %}
{% endblock %}
I looked at the code, tags and syntax, too - I didn’t find anything. Help, please
I think you must correct { % endblock % } to {% endblock %} that might be the error. That is in line 21 of your basic.html.
I mean you have put a space between { and %. and I tried this mistake and got the same error. so if you delete the space between { and % you will be okay.
I am trying to extend my templates .
base_layout.html:
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Articles</title>
<link rel = "stylesheet" href = "{% static 'styles.css' %}">
</head>
<body>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>
article_list.html:
{% extends 'base_layout.html' %}
{% block content %}
<h1>Article List</h1>
<div class = "articles">
{% for article in articles %}
<div class = "article">
<h2>{{ article.title}}</h2>
<p>{{ article.body }}</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
When i run this i am getting the error like this:
django.template.exceptions.TemplateSyntaxError: Invalid block tag on line 11: 'blockcontent'. Did you forget to register or load this tag?
What mistake am i doing?
I got an error:
TemplateSyntaxError at /accounts/profile/
<ExtendsNode: extends "registration/accounts/base.html"> must be the first tag in the template
I wrote base.html:
{% load staticfiles %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% load staticfiles 'bootflat/css/bootflat.min.css' %}">
<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>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<p class="navbar-text">HELLO</p>
{% if user.is_authenticated %}
<p class="navbar-text">{{ user.get_username }}</p>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</body>
</html>
profile.html is:
{% load staticfiles %}
{% extends "registration/accounts/base.html" %}
{% block content %}
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
<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>
</head>
<body>
SEE YOUR PHOTO
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>SEND PHOTO</p>
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
{% endblock %}
I found only base.html was showed accurately, but when I tried base.html inherit profile.html,this error happens. Before,these 2 files are loaded accurately, but when I added href="{% static 'bootflat/css/bootflat.min.css' %}" to profile.html,this error happpens. Why does such an error happen? How can I fix this? I think adding {% load staticfiles %} is right to profile.html,but is it wrong?
You should consider your base.html file as a layout and your profile.html as a template file rendered inside this layout.
For this reason:
load staticfiles block should be inserted in base.html and should be insert in every file where you are loading static assets (see next bullet point)
when you refer to static assets inside src= is enough to load it with static path helper
profile.html should extend the layout base.html and whatever is included in the {% block content %} will be rendered inside the block content tag in your body
base.html
<html lang="ja">
<head>
<meta charset="utf-8">
{% load staticfiles %}
<link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">
<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>
</head>
<body>
{% block content %}
<!-- your body is fine -->
{% end block %}
</body>
</html>
profile.html
{% extends "registration/accounts/base.html" %}
{% block content %}
SEE YOUR PHOTO
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<p>SEND PHOTO</p>
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
<input type="submit" value="Upload">
</form>
{% endblock %}
Edit
as remarked by Daniel Roseman
The error says that you must write extends tag first in your template.
You can read more about this in documentation
So, you should write {% extends "registration/accounts/base.html" %} first in profile.html
{% extends "registration/accounts/base.html" %}
{% load staticfiles %}
{% block content %}
...
{% endblock %}
After that all will works fine!
I have a layout template and a child template. However, none of the extra information from the child template is showing up. Why isn't the information in the child template being used?
FlaskTest.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def hello_world():
return render_template('layout.html')
if __name__ == '__main__':
app.run()
layout.html
<!doctype html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2010 by you.
{% endblock %}
</div>
</body>
</html>
child.html
{% extends 'layout.html' %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style type="text/css">
.important {
color: #336699;
}
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
{% endblock %}
On http://localhost:5000/ I get:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="/static/style.css">
<title> - My Webpage</title>
</head>
<body>
<div id="content"></div>
<div id="footer">
© Copyright 2010 by you.
</div>
</body>
</html>
You need to render child.html, not layout.html. Child will extend layout, but the way you've written it, only layout will be rendered.
return render_template('child.html')