I've came across an issue where message is displayed twice even though its called only once. Sometimes only one message is displayed however, most of the time 2 messages are.
My view:
def register(request):
if request.method == 'POST':
form = UserRegisterForm(request.POST)
if form.is_valid():
form.save()
messages.success(request, f'Account created has been creted! You can log-in now.')
return redirect('login')
else:
if request.user.is_authenticated:
messages.error(request, 'You are loged-in and in order to registrate you must be loged-out.')
return redirect('blog-home')
else:
form = UserRegisterForm()
return render(request, 'users/register.html', {'form': form,'title':'Register Page'})
And here is my template:
Base.html
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'blog/main.css' %}">
{% if title %}
<title> Django blog - {{ title }}</title>
{% else %}
<title> Django blog</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="{% url 'blog-home' %}">Django Blog</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'blog-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'blog-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'profile' %}">{{ user.username }}</a>
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger">
{{ message }}
</div>
{% else %}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can see that in the {% if messages %} block, message is called only once.
And here is the main html:
{% extends "blog/base.html" %}
{% block content%}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author.first_name }}</a>
<small class="text-muted">{{ post.date_posted|date:"d F, Y"}}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content%}
Any ideas what could be causing this?
Related
I am writing a website on Flask, and I encountered a problem that when I send an email with a link to a password recovery page, the http address of which has a token that changes every time, the template that I connected is not generated at all. with completely wrong css styles.
Although the same template is connected in the same way to other pages and everything is fine, what is needed is generated
Here is my view function to handle this page
#app.route('/reset_password/<token>', methods=['POST', 'GET'])
def reset_token(token):
if current_user.is_authenticated:
return redirect(url_for('index_page'))
user = User.verify_reset_token(token)
if user is None:
flash('Неправильний,або застарілий токен', category='error')
return redirect(url_for('reset_password'))
form = ResetPasswordForm()
if form.validate_on_submit():
hash_password = generate_password_hash(form.password.data)
user.password = hash_password
db.session.commit()
return render_template('reset_password.html', title='Відновлення паролю', form=form,
css_link=css_file_reset_password_request_page)
For comparison, here is a function that connects to the same css-style
#app.route('/reset_password', methods=['POST', 'GET'])
def reset_password():
if current_user.is_authenticated:
return redirect(url_for('index_page'))
form = RequestResetForm()
if form.validate_on_submit():
user = User.query.filter_by(email=form.email.data).first()
if user is None:
flash('Неправильний email', category='error')
else:
send_reset_email(user)
flash('Повідомлення було надіслано на вашу електронну пошту,зайдіть туди,щоб отримати '
'інструкції', category='success')
return render_template('reset_password_request.html', title='Відновлення паролю', form=form,
css_link=css_file_reset_password_request_page)
But as a result, these pages have a completely different look
Here is the html template of this page(It is the same as reset_password_request from the previous function, only with some changes)
{% extends 'base.html' %}
{% block body %}
{{ super() }}
{% for cat, msg in get_flashed_messages(True) %}
<div class="flash {{cat}}">{{msg}}</div>
{% endfor %}
<div class="container">
<form class="box" method="POST">
{{ form.hidden_tag() }}
<h1 title="Будь ласка,придумайте новий надійний
пароль">Оновлення паролю</h1>
<div class="group">
<label>{{ form.password.label }}</label>
{{ form.password }}
</div>
<div class="group">
<label>{{ form.double_password.label }}</label>
{{ form.double_password }}
</div>
<div class="group">
<center><button>Відновити</button></center>
</div>
</form>
</div>
{% endblock %}
THIS IS MY base.html FILE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ css_link }}" type="text/css"/>
<script src="https://kit.fontawesome.com/b8991598b2.js"></script>
{% block title %}
{% if title %}
<title>{{ title }}</title>
{% else %}
<title>Сайт</title>
{% endif %}
{% endblock %}
</head>
<body>
<div class="content">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="search-box">
<input class="search-txt" type="text" placeholder="Search...">
<a class='search-btn' href="#">
<i class="fas fa-search"></i>
</a>
</div>
<div class="text-end">
Sign-up
Login
Logout
</div>
</div>
</div>
</header>
{% block body %}
{% endblock %}
</div>
<footer class="footer">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item">Home</li>
<li class="nav-item">Features</li>
<li class="nav-item">Pricing</li>
<li class="nav-item">FAQs</li>
<li class="nav-item">About</li>
</ul>
</footer>
</body>
</html>
And this is my connect to css_files in main.py
css_file = 'static/css/main.css'
css_file_authorization = 'static/css/login_form.css'
css_file_reset_password_request_page = 'static/css/request_passsword.css'
But here is an example of a page that is generated after switching from email:
And here is the one that should have been generated, and is generated in the case of the second handler function
Maybe someone knows how to solve it
I have created an application and everything seems to be working perfectly apart from this one page that I created. The contents are there, however, the styling of the page is not being applied. It actually seems as if the contents of the page I have created is overriding the layout styles.
The layout.html template has worked for every other webpage, and I am so confused it doesn't seem to work for this page.
To give context, this page involves filtering posts by company.
My HTML template is:
<!DOCTYPE html> {% extends "layout.html" %} {% block content %} {% for post in posts.items %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="{{ url_for('company_posts', company=post.company) }}">{{ post.company }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.job_title }}</a></h2>
<p class="article-content">{{ post.sector }}</p>
<p class="article-content">{{ post.location }}</p>
<p class="article-content">{{ post.employment_type }}</p>
More Info
</div>
</article>
{% endfor %} {% for page_num in posts.iter_pages(left_edge=1, right_edge=1, left_current=1, right_current=2) %} {% if page_num %} {% if posts.page == page_num %}
<a class="btn btn-info mb-4" href="{{ url_for('jobs', page=page_num)}}">{{ page_num }}</a> {% else %}
<a class="btn btn-outline-info mb-4" href="{{ url_for('jobs', page=page_num)}}">{{ page_num }}</a> {% endif %} {% else %} ... {% endif %} {% endfor %} {% endblock content %}
My route is:
#app.route("/company/<string:company>")
def company_posts(company): #show all company job posts from specific company
page = request.args.get('page', 1, type=int)
posts = Job_Requirements.query.filter_by(company=company).order_by(Job_Requirements.id.desc()).paginate(per_page=4)
return render_template('company_posts.html', posts=posts)
This is my layout.html template
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> {% if title %}
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='main.css')}}">
<title>{{ title }} | CVLink</title>
{% else %}
<title>CVLink</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">CVLink</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
<a class="nav-item nav-link" href="{{ url_for('jobs') }}">Jobs</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav ms-auto">
{% if current_user.is_authenticated %}
<!--<a class="nav-item nav-link" href="{{ url_for('employer_account') }}">Employer Account</a>-->
<a class="nav-item nav-link" href="{{ url_for('employer_account') }}">Post A Job</a>
<a class="nav-item nav-link" href="{{ url_for('account') }}">Profile</a>
<a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a> {% else %}
<a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
<a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a> {% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% with messages = get_flashed_messages(with_categories=true) %} {% if messages %} {% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message}}
</div>
{% endfor%} {% endif %} {% endwith %} {% block content %}{% endblock %}
</div>
<!--<div class="col-md-4">
<div class="content-section">
<h3>Noticeboard</h3>
<p class="text-muted">More Information</p>
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Job Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</div>
</div>-->
</div>
</main>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Any help will be much appreciated.
Did you tried remove <!DOCTYPE html> from your template?
According to the documentation here should escape...
I run into a problem without understanding where it could come from.
I have the same website in Django 3.0.8 under environment which works on one side on a PC with windows 10:
On the other side, on an old PC with Xubuntu 20.04:
Everything is the same: code, files, environments, version of python (3.8). However, the Xubuntu version doesn't perform well as you can see.
Do you have any idea what could be blocking? I have the impression that Bootstrap and FontAwesomeIcon are not working correctly.
.
EDIT : This is the code of the page.html
{% load i18n %}
{% load static %}
{% load bootstrap5 %}
{% get_current_language as language_code %}
<!DOCTYPE html>
<html lang="{{ language_code }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Une vie électrique sans barrière.">
<meta name="author" content="Pierre TREMELO">
<link rel="icon" href="{% static 'favicon.ico' %}">
<title>ElyanDeal</title>
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
<!-- CUSTOMING -->
<link href="{% static 'css/fontawesome.css' %}" rel="stylesheet">
</head>
<body>
<img src="{% static 'accounts/fond_accueil.jpg' %}" class="superbg" />
<nav class="navbar navbar-expand-md navbar-dark bg-dark static-top">
<a class="navbar-brand" href="/">
<i class="fas fa-home"></i> {% trans 'Home' %}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
{% if request.user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% trans 'Mon compte' %}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{% url 'accounts:change_profile' %}?next={{ request.path }}">
{% trans 'Profil' %}
</a>
<a class="dropdown-item" href="{% url 'accounts:change_password' %}">
{% trans 'Mot de passe' %}
</a>
<a class="dropdown-item" href="{% url 'accounts:change_email' %}">
{% trans 'Email' %}
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'accounts:log_out' %}">
{% trans 'Déconnexion' %}
</a>
</div>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:log_in' %}">{% trans 'Connexion' %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'accounts:sign_up' %}">{% trans 'Créer un compte' %}</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'change_language' %}">{{ language_code|upper }}</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid mt-3">
{% bootstrap_messages %}
{% block content %}
No content.
{% endblock %}
</div>
<script src="{% static 'vendor/jquery/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'vendor/popper/popper.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>
</body>
</html>
And this one for the content of the {% block content %} :
{% extends 'layouts/default/page.html' %}
{% load i18n %}
{% load static %}
{% load bootstrap5 %}
{% block content %}
<div class="center-etroit" style="background-color:transparent; max-width:500px;">
<div class="card">
<div class="card-header">
<h4>{% trans 'Connexion' %}</h4>
</div>
<div class="card-body">
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button class="btn btn-primary">{% trans 'Connexion' %}</button>
</form>
<hr>
<ul>
<li>
{% trans 'Mot de passe oublié ?' %}
</li>
<li>
{% trans 'Identifiant oublié ?' %}
</li>
<li>
{% trans "Renvoyer le code d'activation" %}
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
I ended up finding the issu! I had installed 'django-fontawesome-5' instead of 'fontawesome-free' in my virtual environment. Now that I have reinstalled the correct package, the appearance is fixed!
registration.html and home.html page (among others) inherit from the same layout.html. Everything appears to be set up correctly; sidebar is showing to the right on all pages except where I'm using wtforms. This appears to not be the case for others.
home.html
register.html
layout.html
<!DOCTYPE html>
<html>
<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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
{% if title %}
<title> ANC - {{ title }} </title>
{% else %}
<title>All New Colors</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-yellow fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/"><img src='static/img/anc-logo-nav.png'></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="container" style="text-align: center">
<img style = "padding-top: 3vh; padding-bottom: 8vh;" src = "static/img/website_logo_transparent_background.png">
</div>
<div class="row">
<div class="col-md-8">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Popular Tags</h3>
<p class='text-muted'>Find additional topics using the search bar.
<ul class="list-group">
<li class="list-group-item list-group-item-dark">Latest Posts</li>
<li class="list-group-item list-group-item-dark">Career</li>
<li class="list-group-item list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-dark">Finance</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
home.html
{% extends "layout.html" %}
{% block content %}
{% for post in posts %}
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ post.author }}</a>
<small class="text-muted">{{ post.date_posted }}</small>
</div>
<h2><a class="article-title" href="#">{{ post.title }}</a></h2>
<p class="article-content">{{ post.content }}</p>
</div>
</article>
{% endfor %}
{% endblock content %}
register.html
{% extends "layout.html" %}
{% block content %}
<div class='content-section'>
<form method="POST" action="">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Join Today</legend>
<div class="form-group">
{{ form.username.label(class="form-control-label") }}
{{ form.username(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.email.label(class="form-control-label") }}
{{ form.email(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.password.label(class="form-control-label") }}
{{ form.password(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.confirm_password.label(class="form-control-label") }}
{{ form.confirm_password(class="form-control form-control-lg") }}
</div>
</fieldset>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }}
</form>
</div>
<div class="border-top pt-3">
<small class="text-muted">
Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
</small>
</div>
{% endblock content %}
I'm guessing it has something to do with the bootstrap css but I'm not sure how to fix or override that.
You forgot closing div </div> before closing </form>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }}
</div>
<!DOCTYPE html>
<html>
<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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"> -->
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-yellow fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/"><img src='static/img/anc-logo-nav.png'></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/">Home</a>
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="/login">Login</a>
<a class="nav-item nav-link" href="/register">Register</a>
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="container" style="text-align: center">
<img style = "padding-top: 3vh; padding-bottom: 8vh;" src = "static/img/website_logo_transparent_background.png">
</div>
<div class="row">
<div class="col-md-8">
<div class='content-section'>
<form method="POST" action="">
{{ form.hidden_tag() }}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Join Today</legend>
<div class="form-group">
{{ form.username.label(class="form-control-label") }} {{ form.username(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.email.label(class="form-control-label") }} {{ form.email(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.password.label(class="form-control-label") }} {{ form.password(class="form-control form-control-lg") }}
</div>
<div class="form-group">
{{ form.confirm_password.label(class="form-control-label") }} {{ form.confirm_password(class="form-control form-control-lg") }}
</div>
</fieldset>
<div class="form-group">
{{ form.submit(class="btn btn-outline-info") }} \
</div>
</form>
</div>
<div class="border-top pt-3">
<small class="text-muted">
Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Sign In</a>
</small>
</div>
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Popular Tags</h3>
<p class='text-muted'>Find additional topics using the search bar.
<ul class="list-group">
<li class="list-group-item list-group-item-dark">Latest Posts</li>
<li class="list-group-item list-group-item-dark">Career</li>
<li class="list-group-item list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-dark">Finance</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>
this is how my base.html looks like,everything was working fine until i did some changes adding jquery
{% load static %}
<!DOCTYPE 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type ="text/css" href="{% static 'pmmvyapp/main.css' %}">
<link href="{% static 'js/jquery.js' %}" rel="stylesheet">
{% if title %}
<title> PMMVY-{{ title }}</title>
{% else %}
<title>PMMVY</title>
{% endif %}
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4"><img src="{% static 'images/left-logo.png' %}" width="83" height="89" class='d-inline-block' alt=""/>
<span style="color:white"> Ministry of Women & Child Development | GoI</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
{% if user.is_authenticated %}
<a class="btn btn-primary mr-4" href="{% url 'aganwadi' %}">Aganwadi</a>
<a class="btn btn-primary mr-4" href="{% url 'applyonline' %}">Apply online</a>
{% else %}
<div class="navbar-nav mr-auto">
<a class="navbar-brand mr-4"><img src="{% static 'images/emblem-dark.png' %}" width="60" height="80" class='d-inline-block' alt=""/> <span style="color:white" >Pradhan Mantri Matru Vandana Yojana</span> </a>
</div>
{% endif %}
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<div class="navbar-nav mr-auto">
<a class="btn btn-primary mr-4" href="{% url 'admin:index' %}"> Admin site </a>
<a class="btn btn-primary mr-4" href="{% url 'logout' %}">Logout</a>
</div>
{% else %}
<div class="navbar-nav mr-auto">
<a class="navbar-brand mr-4" href="{% url 'login' %}"><img src="{% static 'images/pm.png' %}" width="65" height="70" class='d-inline-block' alt=""/> <span class="btn btn-primary" style="color:black mr-4" >Login</span> </a>
</div>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<!--mainsec-->
<main role="main" class="container">
<div>
{% if messages %}
{% for message in messages%}
<div class="alert alert-{{ message.tags }}">
{{ message }}
</div>
{% endfor %}
{% endif %}
</div>
<div class="row">
{% block content %}{% endblock %}
</div>
</main>
<!--end mainsec-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{% static 'js/custom.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
this is how my applyonline.html looks like
<body ng-app="">
{% extends "pmmvyapp/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content%}
<div class="col-md-8">
<form method="post" action="/personal_detail/" enctype="multipart/form-data">
<div class="group">
<div class="hide" id="q1">
</div>
</div>
</div>
<div class="hide" id="q2">two</div>
<div class="hide" id="q3">three</div>
<div class="hide" id="q4">four</div>
</div>
<div style="margin-bottom:10px ">
<button id="next">Next</button> <button id="prev">Previous</button>
</div>
<button type="submit" class="btn btn-primary" style="margin-bottom:10px ">Submit</button>
</form>
</div>
<style>
.hide
{
display : none;
}
</style>
{% endblock %}
</body>
my settings.py
INSTALLED_APPS = [
'jquery',
'captcha',
'users.apps.UsersConfig',
'pmmvyapp.apps.PmmvyappConfig',
'crispy_forms',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
my models.py where I am returning either of the one names
class Personal_Detail(models.Model):
beneficiary_adhaar_name=models.TextField(blank=True, null=True)
adhaarno=models.IntegerField(blank=True, null=True)
adhaarcopy = models.FileField(upload_to='adhaar/')
idcard=models.TextField(blank=True, null=True)
adhaar_eid=models.IntegerField(blank=True,null=True)
beneficiary_id_name=models.TextField(blank=True, null=True)
idno=models.IntegerField(blank=True, null=True)
idcopy=models.FileField(upload_to='identitycard/')
def __str__(self):
return self.beneficiary_adhaar_name or self.beneficiary_id_name
my views.py
#login_required
def ApplyOnline(request):
return render(request,'users/applyonline.html')
#login_required
def personal_detail(request):
# ShowHideExample = request.POST.get('showHideExample',False)
beneficiary_adhaar_name=request.POST.get('beneficiary_adhaar_name')
adhaarno=request.POST.get('adhaarno')
adhaarcopy = request.FILES.get('adhaarcopy')
idcard=request.POST.get('idcard')
adhaar_eid=request.POST.get('adhaar_eid')
beneficiary_id_name=request.POST.get('beneficiary_id_name')
idno=request.POST.get('idno')
idcopy = request.FILES.get('idcopy')
apply_online = Personal_Detail(beneficiary_adhaar_name=beneficiary_adhaar_name,adhaarno=adhaarno,adhaarcopy=adhaarcopy,
idcard=idcard,adhaar_eid=adhaar_eid,beneficiary_id_name=beneficiary_id_name,idno=idno,idcopy=idcopy)
apply_online.save()
return render(request,'users/applyonline.html')
I don't know the problem that is causing this it was working fine when suddenly i did some changes with query to create a multi step form and when checked the database I was getting some null entries and when i clicked or tried to delete them I got error.I've included the image of null entries i was getting.
Basically your Model's __str__ method is returning None. Means both of the field's value is None. You need to return a string value from that method. For example:
class Personal_Detail(models.Model):
# rest of the code
def __str__(self):
return self.beneficiary_adhaar_name or self.beneficiary_id_name or str(self.pk)