I'm creating a website and it works fine when i use direct html. Now i want to use Jinja2 to render my template and there is something wrong. You can see that there is a blank space on top of my page here http://kgroupman.azurewebsites.net/ but it works fine with firefox. Inspect element do not point out that blank section and there is no padding or margin and there is nothing wrong with the source. Please help!
Here is the code:
base.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
{% block page_title %}{% endblock %}
</title>
<!--BASE CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="{{url_for('static', filename='css/base.css')}}" />
<!--ADDITIONAL CSS-->
{% block additional_css %}
{% endblock %}
<!--BASE SCRIPT-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--ADDITIONAL SCRIPT-->
{% block additional_script %}
{% endblock %}
</head>
<body>
<section class="header">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img src="{{url_for('static', filename='imgs/4logo.png')}}" id="logo"></span></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
</section>
<section class="body">
<div class="left-panel">
{% block body_left %}
{% endblock %}
</div>
<div class="right-panel">
{% block body_right %}
{% endblock %}
</div>
</section>
<section class="footer">
<span>#Ngo Tuan Khoa - 2016</span>
</section>
</body>
</html>
login.html
{% extends "base.html" %}
{% block page_title %}Đăng nhập | Quản lý nhóm{% endblock %}
{% block additional_css %}
<link rel="stylesheet" href="{{url_for('static', filename='css/login.css')}}" />
{% endblock %}
{% block additional_script %}
<script src="../static/script/login.js"></script>
{% endblock %}
{% block body_left %}
<div class="login-form">
<p><img id="login-icon" src="{{url_for('static', filename='imgs/user.jpg')}}"></p>
<form action="" method="POST">
<p>Tên đăng nhập</p>
<p><input type="text" class="input-field" placeholder="Username"></p>
<p>Mật khẩu</p>
<p><input type="password" class="input-field" placeholder="Password"></p>
<p><input type="button" class="btn-login" value="Đăng nhập"></p>
</form>
</div>
{% endblock %}
{% block body_right %}
<img src="{{url_for('static', filename='imgs/wall.jpg')}}" height="100%" class="img-responsive">
{% endblock %}
It's a character at the top of your body
Solution found. Delete login.html and recreate it. There's must be an invisible character that i can't see somehow!
Related
I'm wanting to render bootstrap carousel and other nested html elements. im newer to Jinja2 and didn't see anything on the internet talking about this particular issue.
here is my python
#app.route("/")
def index():
r = requests.get(os.environ['AWS_Product_URL'])
prods = list(json.loads(r.text))
return render_template("index.html", my_products=prods)
this works
{% for key in my_products %}
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
{% endfor %}
but this doesn't
{% for key in my_products %}
<div class="carousel-item">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
I took an existing template and trying to make this dynamic. the class exists. I'm confused why Jinja2 is having trouble with a nested item in html.
Why??
You're probably just missing to add class active to the carousel item
bootstrap carousel items requires at least one active element, all the others will be hidden.
so try out adding something like
{% for key in my_products %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
Just in case, here's template that I've tested with and it should be working fine assuming my_products is not empty.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner text-center">
{% for key in my_products %}
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<p><strong>{{ key["name"] }}</strong><span>{{ key["price"] }}</span></p>
</div>
{% endfor %}
</div>
<button class="carousel-control-prev bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next bg-dark" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I followed the steps in guide in https://django-private-chat.readthedocs.io/en/latest/readme.html:
base.html:
{% block extra_js %}{% endblock extra_js %}
settings.py:
INSTALLED_APPS = (
...
'django_private_chat',
...
)
CHAT_WS_SERVER_HOST = 'localhost'
CHAT_WS_SERVER_PORT = 5002
CHAT_WS_SERVER_PROTOCOL = 'ws'
urlpatterns = [
"other urls"
url(r'^', include('django_private_chat.urls')),
]
After starting the server I go to http://127.0.0.1:8000/dialogs/some-of-the-users and there is no result whatsoever, the page is empty.
The console displaying:
Uncaught ReferenceError: $ is not defined
at username:128
django version= 3.0.6
python version= 3.7.6
and the latest version of django-private-messaging
It's my first time implementing a chat app so I hope I'm not missing anything fundamental. Have a nice day!
base.html:
<!DOCTYPE html>
{% load static %}
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<link rel="stylesheet" href="{% static 'css/dropdown.css' %}">
<link rel="stylesheet" href="{% static 'css/intro.css' %}">
<link rel="icon" type="image/ico" href="{% static 'icons\favicon.ico' %}"/>
<title>Document</title>
</head>
<body>
<div class="overlay2" id="overlay2">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar>login</a>
<a href="/user/register" class=mantar>register</a>
<button class=button-geri onclick="close('overlay2') ">geri</button>
</div>
</div>
<div class="overlay" id="overlay">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar>enter</a>
<a href="/user/register" class=mantar>register</a>
<button class=button-geri onclick="kapat('overlay') ">back</button>
</div>
</div>
<div class="overlay4" id="overlay4">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h4></h3>
<a href="/user/loginUser" class=mantar></a>
<a href="/user/register" class=mantar></a>
<button class=button-geri onclick="kapat('overlay4') "></button>
</div>
</div>
<div class="overlay5" id="overlay5">
<div id=fullscrean>
<img class=virus2 src="{% static 'icons\virus-new-color.png' %}" alt="virus">
<h3></h3>
<a href="/user/loginUser" class=mantar></a>
<a href="/user/register" class=mantar></a>
<button class=button-geri onclick="kapat('overlay5') "></button>
</div>
</div>
<div class="overlay3" id="overlay3">
<div id=fullscrean2>
<img class=virus3 src="{% static 'icons\delete.png' %}"
alt="sil"></button>
<h4></h3>
<button class=button-cancel onclick="kapat('overlay3')">vazgeç</button>
<button class=button-doit id=doit>sil</button>
</div>
</div>
<div class="overlay6" id="overlay6">
<div id=fullscrean3>
<div class=scrollable-div id=scrollable-div>
{% for i in page_list %}
{% if i == entries2.number %}
<a class=scroll-select id=exception2 href="?page={{i}}"><span id=exception>{{i}}</span></a>
{% else %}
<a class=scroll-select href="?page={{i}}">{{i}}</a>
{% endif %}
{% endfor %}
</div>
{% if entries2.has_previous or entries.has_previous %}
<button class=button-prevp>önceki</button>
{% endif %}
{% if entries2.has_next or entries.has_next %}
<button class=button-nextp>sonraki</button>
{% endif %}
</div>
</div>
<div class="overlay7" id="overlay7">
<div id=fullscrean2>
<img class=virus3 src="{% static 'icons\delete.png' %}"
alt="sil"></button>
<h4>etiketin silinsin mi?</h3>
<button class=button-cancel onclick="kapat('overlay7')">vazgeç</button>
<button class=button-doit id=doit2>sil</button>
</div>
</div>
<div class=line></div>
<header>
<div class="header-top">
<div class=logo-holder>
<img class=virus src="{% static 'icons\virus-new-color.png' %}" alt="virus">
</div>
<div class=search-holder>
<input class=search type="text" placeholder="search it..." />
<button type="submit" class=search-button><img src="{% static 'icons\icons8_search.png' %}"
alt="search"></button>
</div>
</div>
<nav>
<div class=mobile-only>
<ul class=navul>
<li>
<b></b>
</li>
<li>
<b></b>
</li>
{% if request.user.is_authenticated %}
<li>
<b></b>
</li>
<li>
</li>
<li>
<b></b>
</li>
{% else %}
<li>
<b></b>
</li>
<li>
<b></b>
</li>
{% endif %}
</ul>
</div>
</nav>
</header>
<div class=line2></div>
<main id=main>
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li {% if message.tags %} class="{{ message.tags }}" {% endif %}>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block extra_js %}{% endblock extra_js %}
{% block body %}
{% endblock body %}
</main>
</body>
<script src="{% static 'js/jquery.mini.js' %}"></script>
<script src="{% static 'js/dropdown.js' %}"></script>
<script>
setTimeout(function(){
var message_ele = document.getElementsByClassName("messages")[0];
message_ele.style.visibility = 'hidden';
message_ele.style.opacity = 0;
message_ele.style.transition= "visibility 0s 2s, opacity 2s linear";
}, 2000);
setTimeout(function(){
var message_ele = document.getElementsByClassName("errorlist")[0];
message_ele.style.visibility = 'hidden';
message_ele.style.opacity = 0;
message_ele.style.transition= "visibility 0s 2s, opacity 2s linear";
}, 2000);
function kapat(id){
var geri=document.getElementById(id);
geri.style.display="none";
$('body').css('overflow', 'scroll');
}
$("#overlay6").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay6").css("display","none")
$('body').css('overflow', 'scroll');
});
$("#overlay3").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay3").css("display","none")
$('body').css('overflow', 'scroll');
});
$("#overlay7").click(function (e) {
if(e.target !== e.currentTarget) return;
$("#overlay7").css("display","none")
$('body').css('overflow', 'scroll');
});
</script>
{% block javascript %}{% endblock %}
</html>
I'm trying to display data that I've read from a csv file into a list, on a Flask rendered html template. For some reason, the html page (/sheet) is completely empty. Any help would be appreciated! Below is the relevant code.
This is the method (in Python) that reads the csv file and tries to open the webpage:
#app.route("/sheet", methods=["GET"])
def get_sheet():
file = open("survey.csv", "r")
reader = csv.reader(file)
registrations = list(reader)
return render_template("sheet.html", registrations=registrations)
This is the code in the sheet.html:
{% extends "layout.html" %}
{% block body %}
<h1>Total registrations</h1>
<ul>
{% for registration in registrations %}
<li>{{ registration[0] }} {{ registration[1] }} {{ registration[2] }}</li>
{% endfor %}
</ul>
{% endblock %}
And here's layout.html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- http://getbootstrap.com/docs/4.1/ -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="/static/styles.css" rel="stylesheet">
<title>Survey</title>
</head>
<body>
<!-- http://getbootstrap.com/docs/4.1/components/navbar/ -->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand mb-1 h1" href="/">Survey</a>
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" type="button" data-target="#navbarNav" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/form">Form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sheet">Sheet</a>
</li>
</ul>
</div>
</nav>
<!-- http://getbootstrap.com/docs/4.1/layout/overview/#containers -->
<main class="container-fluid p-5">
{% block main %}{% endblock %}
</main>
</body>
</html>
In the layout.html file, you did not defined a block body. You have only {% block main %}{% endblock %}.
So to fix the issue, you need to replace {% block body %} by {% block main %} in the sheet.html file.
The sheet.html will be similar to this:
{% extends "layout.html" %}
{% block main %}
<h1>Total registrations</h1>
<ul>
{% for registration in registrations %}
<li>{{ registration[0] }} {{ registration[1] }} {{ registration[2] }}</li>
{% endfor %}
</ul>
{% endblock %}
I have problem with Div refreshing. idk where is my problme. and its says the problem is Not Found: /chat/(?P5\d+)/(?Pchatsnr1[\w-]+)/chat.html
And this is my code for it
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}kobby chat {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.css">
<script
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/emojionearea/3.4.1/emojionearea.js"></script>
<Link rel="stylesheet" href="{% static 'chat/style.css'%}">
</head>
<body>
{% include 'chat/navbar.html' %}
<div id="refresh" class="container-fluid">
{% block content %}
{% endblock %}
</div>
<script type="text/javascript">
$(document).ready(function(event){
$("#text").emojioneArea({
pickerPosition:"bottom "
})
$('#auto').load('chat.html');
refresh();
});
function refresh()
{
setTimeout( function() {
$('#auto').fadeOut('slow').load('chat.html').fadeIn('slow');
refresh();
}, 5000);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
and next part for this
{% extends 'chat/base.html' %}
{% block title %}{{post.title}} | {{block.super}}{% endblock %}
{% block content %}
<h3>
{{post.title}}
</h3>
<small>Chat created by Kobby</small>
<p>{{post.body}}</p>
<form method="post">
{% csrf_token %}
<textarea id="text" name="content" cols="40" rows="10" maxlength="160" required="" id="id_content" style="margin-top: 0px; margin-bottom: 0px; height: 35px;"></textarea>
{% if request.user.is_authenticated %}
<input type="submit" value="Sumbit" class="btn btn-outline-success" />
{% else %}
<input type="submit" value="Sumbit" class="btn btn-outline-success" disabled/>
{% endif %}
</form>
<div id="auto" class="main-comment-section">
{% include 'chat/chat.html' %}
</div>
{% endblock %}
Then finnaly
{{comments.count}} Chat message{{comments|pluralize}}
{% for comment in comments %}
<blockquote class="blockquote">
<p class="mb-0">{{comment.content}}</p>
{% if comment.user.is_staff %}
<footer class="blockquote-footer">by <cite title="Source Title" style="color:red;">{{comment.user|capfirst}}</cite></footer>
{% else %}
<footer class="blockquote-footer">by <cite title="Source Title">{{comment.user|capfirst}}</cite></footer>
{% endif %}
</blockquote>
{% endfor %}
I think i have problem in urls like .load() method i was trying diffrent urls but same result . Maybe i need some other methof for refreshing html code
I'm using Django but for some reason the <h2> tag displays article.title with no problem but the <p> tag won't display anything - even simple text.
{% extends 'base_layout.html' %}
{% block content%}
<h1>Articles List</h1>
<div class="articles">
{% for article in articles %}
<div class="article">
<h2>{{ article.title}}</h2>
<p>TEST TEXT</p>
<p>{{ article.date }}</p>
</div>
{% endfor %}
</div>
{% endblock %}
the base_layout.html is
{% load static from staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carpe Nocturn</title>
<link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>
<header class="wrapper">
<h1><img src="{% static 'logo.png' %}" alt="Carpe Nocturn" /></h1>
</header>
<div class="wrapper">
{% block content %}
{% endblock %}
</div>
</body>
</html>