Django csrf_token error, while I wrote it in my HTML file, but why does this error message poped up when I wrote that csrf_token?
<!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 'f/ask/ask.css' %}">
<title>BareTalk</title>
</head>
<body>
{% block content %}
<div id="wrapper">
<form method="POST" action="">{% csrf_token %}
{{ form }}
<!-- TODO: input submit Reg() function javascript -->
<button name="final" id="final">Ask</button>
</div>
</form>
</div>
{% endblock %}
</body>
<script src="{% static 'f/ask/ask.js' %}"></script>
</html>
paste this code and try again ->
<!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 'f/ask/ask.css' %}">
<title>BareTalk</title>
</head>
<body>
<div id="wrapper">
<form method="POST">
{% csrf_token %}
{{ form }}
<!-- TODO: input submit Reg() function javascript -->
<button name="final" id="final">Ask</button>
</form>
</div>
</body>
<script src="{% static 'f/ask/ask.js' %}"></script>
</html>
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 wanting to take a dataframe and put it to a bootstrap table that is searchable. Right now I have this:
tester.html
<!DOCTYPE html>
<html lang="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/df_style.css') }}">
<style>
body {font-family: "Lato", sans-serif}
.mySlides {display: none}
</style>
</head>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<table id="myTable">
<h1>
<!--Displaying the converted table-->
{% for table in tables %}
<h2>{{titles[loop.index]}}</h2>
{{ table|safe }}
{% endfor %}
</h1>
</table>
</div>
</body>
app.py
from app import app
from flask import Flask, render_template
#app.route("/")
def eod_coin():
return render_template('tester.html', tables=[eod.to_html()], titles=[''])
I have looked at the following How to make bootstrap-table-filter-control work with Flask, Jinja and Dataframe but can't seem to get the search function to work when I want to pass in a df and not building the data in my app.py
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="{{ static 'images/logo.png' }}" alt="Company Logo">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
-->
</body>
</html>
when including the static files in the Django-jinja template it shows an error. If I removed that line It worked. But I want to load my static files in jinja template.
First you have to load static at top of your html page
{% load static %}
Then you have to use {% %} instead of {{ }}
<link rel="icon" href="{% static 'images/logo.png' %}" alt="Company Logo">
you need to add {% load static %} first
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>
everyone! I have an issue when inheriting from another template in Flask. My first file layout.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<h1>Some header</h1>
</header>
<content>
{% block content %}{% endblock %}
</content>
</body>
</html>
Second one "main.html":
{% extends "layout.html" %}
{% block content %}<p>test</p>{% endblock %}
Everything looks ok but when I load the page in browser the elements looks like this(everything from head is moved to body:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<meta charset="UTF-8">
<title>Flask</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script type="text/javascript" src="script.js"></script>
<header>
<h1>Some header</h1>
</header>
<content>
<p>test</p>
</content>
</body>
</html>
Can anyone explain why this happens?
Maybe a little bit too late... The issue was, that I'd changed my IDE. Before I'd used PyCharm, then I switched to Visual Studio. It looks like they both use different encoding and something broke during migration. Creating new file and copying content was the solution.