Use forms in Bootstrap 4 modals with Flask.
Project description
Modals for Flask
Use forms in Bootstrap 4 modals with Flask.
Description
Plain forms can be boring. Using them in modals is possible, but requires JavaScript. Normal form submission in modals has its own problems.
This Flask extension eases the process of using forms in (Bootstrap 4) modals. No JavaScript coding is required on your part. The ajax calls are handled behind the scenes with html-over-the-wire Turbo library and the Turbo-Flask extension. You can code in pure Python - flashing messages and rendering templates.
Installation
pip install Flask-Modals
Usage
-
Import the
Modal
class and instantiate it in yourapp.py
file.from flask_modals import Modal app = Flask(__name__) modal = Modal(app)
-
Alternatively if you are using the application factory pattern:
from flask_modals import Modal modal = Modal() def create_app(): app = Flask(__name__) modal.init_app(app)
-
Include the following in the head tag of your base template.
{{ modals() }}
-
Include the following in the modal body.
<div class="modal-body"> {{ modal_messages() }} <form method="post"> ...
-
Import the function
render_template_modal
in yourroutes.py
file and use it instead ofrender_template
in the route handler for the page with the modal form. It takes the same arguments asrender_template
, apart frommodal
(the modalid
), and optionallyturbo
(False
if modal is not to be displayed) andredirect
(False
if you are not redirecting). See the next examples for use ofturbo
andredirect
.Example route handler:
from flask_modals import render_template_modal @app.route('/', methods=['GET', 'POST']) def index(): form = LoginForm() if form.validate_on_submit(): if form.username.data != 'test' or form.password.data != 'pass': flash('Invalid username or password', 'danger') # You can use `render_template_modal` here return redirect(url_for('index')) login_user(user, remember=form.remember_me.data) flash('You have logged in!', 'success') return redirect(url_for('home')) return render_template_modal('index.html', form=form, modal='modal-form')
In the target route, use
render_template_redirect
with the same arguments asrender_template
.from flask_modals import render_template_redirect @app.route('/home') def home(): ... ... return render_template_redirect('home.html', ...)
See the example folder in the repo for more details.
-
If you want to redirect to the same page outside the modal, use Flask's
session
proxy as follows:@app.route('/', methods=['GET', 'POST']) def index(): flag = session.pop('flag', True) form = LoginForm() if form.validate_on_submit(): if form.username.data != 'test' or form.password.data != 'pass': flash('Invalid username or password', 'danger') return redirect(url_for('index')) login_user(user, remember=form.remember_me.data) flash('You have logged in!', 'success') session['flag'] = False return redirect(url_for('index')) return render_template_modal('index.html', form=form, modal='modal-form', turbo=flag)
-
If you want to render a template and not redirect, then use the following pattern:
@app.route('/', methods=['GET', 'POST']) def index(): form = LoginForm() if form.validate_on_submit(): if form.username.data != 'test' or form.password.data != 'pass': flash('Invalid username or password', 'danger') return render_template_modal('index.html', form=form, modal='modal-form', redirect=False) login_user(user, remember=form.remember_me.data) flash('You have logged in!', 'success') return render_template_modal('index.html', form=form, turbo=False, modal='modal-form', redirect=False) return render_template_modal('index.html', form=form, modal='modal-form', redirect=False)
Note
-
The extension loads the Turbo library only in pages that have a modal form.
-
It loads the NProgress js library to display a progress bar during form submission.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for Flask_Modals-0.2.5-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | b07d8d30d9d3920db043aa816735047d5db52e412eecb6cce57f792b872a70d7 |
|
MD5 | 24ccfb454e0a79c523f68b9cbb3bff82 |
|
BLAKE2b-256 | 83e1292eb0f593c915c5faf38448bd50cd278f5c87f418cebd87dd66d175419b |