Flask html templates inheritance issue - mixed elements

Flask html templates inheritance issue - mixed elements - python

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.

Related

Pandas Dataframe to searchable bootstrap table

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

Template syntax error Could not parse the remainder: '("images/logo.png")' from 'static("images/logo.png")'. in django-jinja template?

<!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

Why isn't my bootstrap css applying in Django

I am currently learning django and I tried to apply bootstrap css for my little project but it keeps throwing this following error and doesn't apply.
Refused to apply style from 'https://stackpath.bootstrapcdn.com/%20%20%20%20bootstrap/4.4.1/css/bootstrap.min.css' because its MIME type ('application/xml') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
This is my code.
<!Doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css" integrity="
sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>crm1</title>
</head>
<body>
{% include 'accounts/navbar.html'%}
{% block content %}
{% endblock %}
<hr>
<h5>Our footer</h5>
</body>
</html>

Your template doesn't seem to have {% load static %} at the top. Read docs here

I think you need to create a new directory (with a static name) in your Django project. And re-create a new directory (named css).
Directory tree :
Your Project -> new directory -> static -> new directory -> css
And download bootstrap.min.css file and copy/paste into css file.
project
|_static
|_css
|_bootstrap.min.css
You can change your code as follows:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}"/>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>

Django csrf_token error, while I wrote it

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>

AngularJS is not loading

Hi people I have a html file named responsive.html. I want to use angularJS here. my resposive.html looks like this
<html ng-app="a">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="static/js/angular.min.js"></script>
<script src="static/js/app.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</head>
<title> Helooqw</title>
<body ng-controller="aA">
{{ name }}
</body>
</html>
and my app.js
var app = angular.module('a', []);
app.controller('aA', ['$scope', function($scope){
$scope.name = 'Gentle lah';
}])
But when I load the page, i dont able to see the name there. Please help on this issue. Thanks in advance.
Attached is my directory:

Added verbatim because its using django.
<html ng-app="a">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="static/js/angular.min.js"></script>
<script src="static/js/app.js"></script>
</head>
<title> Heloow</title>
<body ng-controller="aA">
{% verbatim %}
{{ name }}
{% endverbatim %}
</body>
</html>

Develop Reference

Python is a programming language that lets you work quickly and integrate systems more effectively.

Flask html templates inheritance issue - mixed elements - python

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.

Related

Pandas Dataframe to searchable bootstrap table

Template syntax error Could not parse the remainder: '("images/logo.png")' from 'static("images/logo.png")'. in django-jinja template?

Why isn't my bootstrap css applying in Django

Django csrf_token error, while I wrote it

AngularJS is not loading

Categories

Resources