I cannot show a file-upload button.
I wrote in profile.html like
{% extends "registration/accounts/base.html" %}
{% block content %}
user.username: {{ user.username }}<hr>
user.is_staff: {{ user.is_staff }}<hr>
user.is_active: {{ user.is_active }}<hr>
user.last_login: {{ user.last_login }}<hr>
user.date_joined: {{ user.date_joined }}
{% endblock %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>UPLOAD</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<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>
<![endif]-->
</head>
<body>
{% block body %}
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
<input type="file" name="files[]" multiple>
<input type="hidden" value="{{ p_id }}" name="p_id">
{% csrf_token %}
<input type="submit">
</form>
</div>
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
So,I wrote multipart/form-data tag like
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">.
But, profile.html did not show the part of ~ .
it showed only {% extends "registration/accounts/base.html" %}
~ {% endblock %}.
How can i fix it?
Placing and position of {% block content %} is wrong in your code.
There are several issues with your code and I removed them.
You dont need an extra {% block body %}.
So you should use this code instead :
{% extends "registration/accounts/base.html" %}
{% block content %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UPLOAD</title>
</head>
<body>
user.username: {{ user.username }}<hr>
user.is_staff: {{ user.is_staff }}<hr>
user.is_active: {{ user.is_active }}<hr>
user.last_login: {{ user.last_login }}<hr>
user.date_joined: {{ user.date_joined }}
<div class="container">
<form action="{% url 'accounts:upload_save' %}" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<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 %}
Also Note that, Place the csrf_token in correct position and add value="Upload" to input type="submit" .
Related
This is my HTML code:
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'jquery-3.6.2.min.js' %}" ></script>
<script src="{% static 'jquery.js' %}" ></script>
</head>
<body>
<form action="{% url 'index' %}" method="post">
{% csrf_token %}
<button name="button1">button1</button>
<button name="button2">button2</button>
<input type="text" name="textbox">
</form>
</body>
</html>
Every time I type some text in the textbox, let's say I type: "hi" and hit enter, the request.POST returns:
<QueryDict: {'csrfmiddlewaretoken': ['FX1qFNzbQUX3fYzAwW27cOu83omLzifnlLU5X0WXXVdOiyNretM5b3VgsGy1OogA'], 'button1': [''], 'textbox': ['hi']}>
Why does request.POST contain 'button1': [''] even though I haven't clicked on it?
Is there a way to avoid request.POST to have 'button1': ['']?
Remove a name attribute from your <button> tag if you don't need to know which buttons is pressed by a user:
<form action="{% url 'index' %}" method="post">
{% csrf_token %}
<button>button1</button>
<button>button2</button>
</form>
As the button is an input as well and can contain name and value.
Alternatively you may use the feature to implement the following approach if you wish to vary your backend logic dependant of which button is pressed:
In a template file:
<form action="{% url 'index' %}" method="post">
{% csrf_token %}
<button name="action" value="button1_pressed">button1</button>
<button name="action" value="button2_pressed">button2</button>
</form>
In your views.py:
if request.method == "POST":
back = reverse('index')
action = request.POST.get("action")
if action == "button1_pressed":
# do something
messages.success(request, "Successed!")
return redirect(back)
if action == "button2_pressed":
# do something else
messages.success(request, "Successed!")
return redirect(back)
you may Try
<!--base.html-->
{% load static %}
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="{% static 'jquery-3.6.2.min.js' %}" ></script>
<script src="{% static 'jquery.js' %}" ></script>
</head>
<body>
{% block content %}
<form action="{% url 'index' %}" method="post">
{% csrf_token %}
<input type="text" name="textbox">
<button name="button1">button1</button>
<button name="button2">button2</button>
</form>
{% endblock %}
</body>
</html>
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>
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'm receiving data from an Arduino,parsing it using Python and my intent is to update the values in the HTML using the data from serial. Like <h6>value</h6>so the new value will be there when I refresh the page. How to do it?
I'm not sure about your situation but, We use python as the server-side language and for making a dynamic HTML, we use Django Template which is developed for Django (A python based framework).
Here's an example of making a simple html with some data:
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="{{ meta.keywords }}" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<meta name="HandheldFriendly" content="true"/>
<title>{{ meta.title}}</title>
<meta name="description" content="{{ meta.description }}">
<meta name="og:description" content="{{ meta.description }}">
<meta property="og:title" content="{{ meta.title }}" />
<meta property="og:image" content="{{ meta.image_url}}" />
<meta property="og:image:type" content="image/png" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" charset="utf-8">
</head>
<body>
<h1>{{ data.title }}</h1>
<h2>{{ data.description }}</h2>
{% if data.additional_info %}
<p>
{{ data.additional_info }}
</p>
{% endif %}
{% if data.list1|length > 0 %}
{% for item in data.list1 %}
<h2>{{ item.title }}</h2>
<p>
{{ item.content }}
</p>
{% endfor %}
{% endif %}
{% if data.list2|length > 0 %}
{% for item in data.list2 %}
<h2>{{ item.title }}</h2>
<p>
{{ item.content }}
</p>
{% endfor %}
{% endif %}
{% if data.list3|length > 0 %}
{% for item in data.list3 %}
<h2>{{ item.title }}</h2>
<p>
{{ item.content }}
</p>
{% endfor %}
{% endif %}
</body>
</html>
I'm trying to do template inheritance to the following two pages and everything is being inherited but the title of my page. I've tried several variations on placing the title in different locations but still nothing. By the way I'm working this on my localhost.
Here is my code:
base.html
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title %}{% endblock %} - My Webpage</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">
{% endblock %}
</head>
<body>
<div class="container">
{% block content %} {% endblock %}
</div>
</body>
</html>
login.html
{% extends "base.html" %}
{% block head %}{% endblock %}
{% block title %} Log In {% endblock %}
{% block content %}
<h2>Log In</h2>
Sign Up
<form method="post">
<label for="username">Username:</label>
<input id="username" type="text" name="username" value="{{username}}">
{{username_error}}
{{user_not_found}}
<br>
<label for="pass">Password:</label>
<input id="pass" type="password" name="password" value="">
{{incorrect_password}}
{{password_error}}
<br>
<button>Submit</button>
</form>
{% endblock %}
Turns out I just had to take out the head block for the head and title section to load. Reason why I didn't do it earlier is because I had another template that had to use some specific css that was in the header.
{% extends "base.html" %}
{% block title %} Log In {% endblock %}
{% block content %}
<h2>Log In</h2>
Sign Up
<form method="post">
<label for="username">Username:</label>
<input id="username" type="text" name="username" value="{{username}}">
{{username_error}}
{{user_not_found}}
<br>
<label for="pass">Password:</label>
<input id="pass" type="password" name="password" value="">
{{incorrect_password}}
{{password_error}}
<br>
<button>Submit</button>
</form>
{% endblock %}
#Mr.Bill or just use instead {% block head %}{% endblock %}
{% block head %}{{ super() }}{% endblock %}
You are welcome :)