Use forms in Bootstrap modals with Flask.
Project description
Modals for Flask
Use forms in Bootstrap 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 modals. Bootstrap versions 4 and 5 are supported. No JavaScript coding is required on your part. The JavaScript is handled behind the scenes and uses html-over-the-wire. You can code in pure Python - flashing messages and rendering templates.
Installation
pip install Flask-Modals
Setup
-
Import the
Modal
class and instantiate it in yourapp.py
file.from flask_modals import Modal app = Flask(__name__) modal = Modal(app)
You will also need a secret key in the app config (not shown).
-
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"> ...
Basic usage
You only need to import the function render_template_modal
in your routes.py
file. Use it instead of render_template
in the route handler for the page with
the modal form. It takes an extra argument - modal
(the modal id
).
Example route handler:
from flask_modals import render_template_modal
@app.route('/', methods=['GET', 'POST'])
def index():
# Following code is standard in any application
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')
return redirect(url_for('home'))
# Following line is new
return render_template_modal('index.html', form=form, modal='modal-form')
Other usage
-
If you want to redirect to the same page outside the modal, use Flask's
session
proxy:@app.route('/', methods=['GET', 'POST']) def index(): flag = session.pop('flag', False) 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'] = True return redirect(url_for('index')) modal = None if flag else 'modal-form' return render_template_modal('index.html', form=form, modal=modal)
-
If you want to render a template and not redirect:
@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') login_user(user, remember=form.remember_me.data) flash('You have logged in!', 'success') return render_template_modal('index.html', form=form, modal=None) return render_template_modal('index.html', form=form, modal='modal-form')
If the above looks verbose, you can use the
response
decorator and return a context dictionary, like so:from flask_modals import response @app.route('/', methods=['GET', 'POST']) @response('index.html') def index(): ... ... return {'form': form, 'modal': 'modal-form'}
Note
-
See the examples folder in the repo for more details.
-
The extension loads the NProgress js library to display a progress bar during form submission.
-
If you have custom javascript which has global constants, you need to wrap it in an IIFE. Otherwise, there could be redeclaration errors.
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.4.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 627479b9c6249a1b4a0cd838325374831fece319ae213e728af2e557e241ea29 |
|
MD5 | 1c7eb55842da18af0dcb07632e0391e5 |
|
BLAKE2b-256 | 8fde8ea4bc16b9069ff54789b700e40f32a10c60263c65722426e2119af301ad |