I cannot find what is wrong with my Flask app. I keep getting werkzeug.routing.BuildError: Could not build URL for endpoint 'mark_report'.
Here is /index
<!DOCTYPE html>
<html> <head>
<title>Title</title>
<link rel="stylesheet" href="../static/css/style.css">
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> </head> <body>
{% block content %}
{% endblock %} </body> </html>
Here is our main page
{% extends "index.html" %} {% block content %} <div class="container"> <div class="spacer">
</div> <div class="row header-row">
<h1>EMS Suite</h1> </div> <div class="row">
<div class="col-md-5">
<ul class="list-group">
<li class="list-group-item li-custom"><h3>Mark Report</h3></li> </ul>
</div>
<div class="col-md-7">
{% block page_content %}
{% endblock %}
</div> </div> <nav class="navbar navbar-default navbar-fixed-bottom footer">
<div class="container-fluid">
</div> </nav> </div> {% endblock %}
Here is the route, there is an HTML page named mark_report.html in our template folders.
#app.route('/mark_report')
def mark_report():
return render_template('mark_report.html')
I made the mistake of having the below if statement above my routes.... Thank you everyone
if __name__ == "__main__":
app.run(host='0.0.0.0', port=8080)
Related
I am trying to get navigation bar to work across all apps. But i am not able to call the function from there.
this is my base.html.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Main CSS file -->
{% load static %}
<link rel="stylesheet" href="{% static 'main/main.css' %}">
{% block style %} {% endblock %}
<title>{% block title %} {% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Chili Pili</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item btn-login">
Login
</li>
</ul>
</div>
</nav>
<div class="main">
{% block content %}
{% endblock %}
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<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>
</body>
</html>
I am trying to call the login function which goes to the login page in login app on main page url. Also I want to make the login function works across different apps. Therefore, I am not able to call the function here (in the example code provided). Is there any way I can call the login function here (in the example code provided). So, I don't have to create login page again.
If your base.html say is in an app called pages, and the template path is pages/templates/pages/base.html you can do in all apps
{% extends 'pages/base.html' %}
*I am having trouble in my index.html file. {% extends 'base.html' %} works. But everything b/w
{% block content %}{% endblock content %} doesn't execute. Here are my files.
views.py:-*
from django.shortcuts import render
def index(request):
return render(request, 'main/index.html')
base.html:-
<!doctype html>
{%load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<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.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<title>To Do App</title>
</head>
<body>
<div>
<nav class=" navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="/">To Do App</a>
</nav>
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div>
</body>
</html>
index.html:-
{% extends 'base.html'%}
{% block content %}
<div class="row">
<div class="col">
<h2>Add Item</h2>
</div>
</div>
{% endblock content %}
All it shows is a navbar of dark color saying To Do App
I also tried adding advanced things like form but it didn't work so then i added this heading saying Add Item. And guess what it doesn't work
When I inspect elements in browser I can see your Heading "Add Item". The only problem was that the whole <div class="container">...</div> was hidden behind nav bar. And the reason was CSS.
Adding something like margin-top: 56px to .container may solve the problem.
Based on documentation you must use only 'endblock' tag when you are closing tag.So you must replace {% endblock content %} with {% 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
For some reason the title is not properly aligned and the navbar is too thick?
How will I be able to let it show properly aligned and smaller size?
I am sure it can be done using Bootstrap itself, without additional css, right?
Sorry, I can't post the image directly here, need higher reputation.
Screenshot of the navbar
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
<!-- This link is just added for support on StackOverflow. -->
<link href="http://157.97.56.42:8000/static/css/bootstrap.css" rel="stylesheet"/>
<style>
html, body {
margin-top: 65px;
}
</style>
{% block base.head %}
{% endblock %}
</head>
<body>
{% block base.header %}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<span class="navbar-brand">Developity</span>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
</ul>
</nav>
{% endblock %}
{% block base.body %}
{% endblock %}
{% block base.footer %}
{% endblock %}
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/bootstrap.js' %}"></script>
<!-- This link is just added for support on StackOverflow. -->
<script src="http://157.97.56.42:8000/static/js/jquery.js"></script>
<script src="http://157.97.56.42:8000/static/js/bootstrap.js"></script>
</body>
</html>
Removing the navbar-text class will remove the margin from the links making the navbar smaller and everything aligned.
<nav class="navbar navbar-inverse" role="navigation">
<span class="navbar-brand">Developity</span>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
</ul>
</nav>
Or you can add navbar-text to the navbar-brand to give it the same margins as the links.
<nav class="navbar navbar-inverse" role="navigation">
<span class="navbar-brand navbar-text">Developity</span>
<ul class="nav navbar-nav">
<li>Home</li>
<li>Projects</li>
</ul>
</nav>
Both shown here http://codepen.io/anon/pen/RpvYba
I'm new to Django. I'm having problem including a sub-template in a main template. The directory structure of my project is attached in the snapshot. I removed the default views.py and created my own folder named "views" and put my views in it. Here is what I've done:
1. app/views/__init__.py
from .home import *
2. app/views/home.py
from django.shortcuts import render
def index(request):
return render(request, 'home.html')
3. app/templates/home.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>
Administrator Section
</title>
<link type="text/css" rel="stylesheet" href="{% static "css/common.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "css/theme/transdmin.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "css/login.css" %}"/>
<script type="text/javascript" src="{% static "js/jquery-1.10.2.js" %}"></script>
<script type="text/javascript" src="{% static "js/common.js" %}"></script>
<script type="text/javascript" src="{% static "js/login.js" %}"></script>
</head>
<body>
<div>
<div id="wrapper" class="ys-adminform">
{% include "includes.header_logo.html" %}
<form id="form-login" class="admin-section-form frm">
<div class="header">
<br/>
<h1>Login</h1>
<br/>
</div>
<div class="content">
<div class="form-row">
<input name="email" class="input" placeholder="Email" type="text"/>
<div class="user-icon"></div>
</div>
<div class="form-row">
<input name="password" class="input password" placeholder="Password" type="password"/>
<div class="pass-icon"></div>
</div>
</div>
<div class="footerlogin">
<input class="button" name="btn-login" value="Authenticate" type="button"/>
<div class="message" style="font-weight: bold; padding-top:16px;"> </div>
</div>
</form>
</div>
</div>
{% include "includes.footer.html" %}
</body>
</html>
The problem is include is not adding content from the sub-views.
I understand it could be a path problem but I tried various options like:
{% include "includes.header_logo.html" %}
{% include includes.header_logo.html %}
{% include "includes/header_logo.html" %}
{% include "templates.includes.header_logo.html" %}
{% include "app.templates.includes.header_logo.html" %}
etc.
You have to use directory slashes (/), not dots (.)
For example:
{% include "includes.footer.html" %}
becomes this:
{% include "includes/footer.html" %}
As suggested by Leistungsabfall, "includes/footer.html" works. The header was not working because it had:
This line must be crashing and because of which header was not working.
Simply add template folder with slash .... like
{% include "blog/footer.html" %}