Reputation: 179
I have a Flask template that displays a page with a dropdown
list of owners
, a table
with the owner's win-loss record, and a radio
to toggle between regular
season record and playoff
record.
The desired workflow is:
/matchup-history/regular
. (this works)radio
is toggled. (this doesn't work)matchup-history.html
{%- extends "base.html" -%}
{% block nav_matchups %}active{% endblock %}
{%- block content -%}
<form action="{{ url_for('show_matchup_history', matchup_type=request.form['matchup_type']) }}" method="post">
<label>
<select name="owner_id" onchange="this.form.submit()">
{%- for o in owners %}
{%- if request.form['owner_id'] == o['owner_id']|string() %}
<option value="{{ o['owner_id'] }}" selected>{{o['first_name'] + " " + o['last_name'] }}</option>
{%- else %}
<option value="{{ o['owner_id'] }}">{{o['first_name'] + " " + o['last_name'] }}</option>
{%- endif %}
{%- endfor %}
</select>
</label>
{% block matchup_type_radio %}{% endblock %}
</form>
{%- if records|length > 0 %}
<div class="stats-table">
<table>
<tr>
{%- for th in table_headers %}
<th>{{ th }}</th>
{%- endfor %}
</tr>
{%- for r in records %}
<tr>
{%- for cn in column_names %}
<td>{{ r[cn] }}</td>
{%- endfor %}
</tr>
{%- endfor %}
</table>
</div>
{%- endif %}
{% endblock -%}
matchup-history/regular.html
{%- extends "matchup-history.html" -%}
{% block matchup_type_radio %}
<label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()" checked>Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()">Playoffs</label>
{% endblock %}
matchup-history/playoffs.html
{%- extends "matchup-history.html" -%}
{% block matchup_type_radio %}
<label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()">Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()" checked>Playoffs</label>
{% endblock %}
app.py
@app.route('/matchup-history/<string:matchup_type>', methods=['GET', 'POST'])
def show_matchup_history(matchup_type):
table_headers = ["Opponent", "Wins", "Losses"]
column_names = ["opponent_owner_name", "wins", "losses"]
owners = queries.get_owners()
if request.method == 'POST':
owner_id = request.form['owner_id']
else:
owner_id = owners[0]['owner_id']
if matchup_type == REGULAR_SEASON:
records = queries.get_matchup_history_regular(owner_id)
else:
records = queries.get_matchup_history_playoffs(owner_id)
return render_template("matchup-history/{matchup_type}.html".format(matchup_type=matchup_type),
title='Matchup History', table_headers=table_headers, column_names=column_names,
owners=owners, records=records)
The page correctly loads /matchup-history/regular
when clicked on, but fails whenever the radio button is toggled:
127.0.0.1 - - [20/Sep/2018 08:32:53] "GET /matchup-history/regular HTTP/1.1" 200 -
127.0.0.1 - - [20/Sep/2018 08:32:56] "POST /matchup-history/ HTTP/1.1" 404 -
It seems like request.form['matchup_type']
is empty when matchup-history.html
is rendered, so submitting the form will not have the desired effect. How can I refactor to route url_for
to different matchup_type
?
Edit: Per @Joost's suggestion, I rethought the design.
matchup-history.html
{%- extends "base.html" -%}
{% block nav_matchups %}active{% endblock %}
{%- block content -%}
<form action="{{ url_for('show_matchup_history') }}" method="get">
<label>
<select name="owner_id" onchange="this.form.submit()">
{%- for o in owners %}
<option value="{{ o['owner_id'] }}" {%- if o['owner_id'] == selected_owner %} selected {% endif %}>{{o['first_name'] + " " + o['last_name'] }}</option>
{%- endfor %}
</select>
</label>
<label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()" {%- if matchup_type == "regular" %} checked {% endif %}>Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()"{%- if matchup_type == "playoffs" %} checked {% endif %}>Playoffs</label>
</form>
{%- if records|length > 0 %}
<div class="stats-table">
<table>
<tr>
{%- for th in table_headers %}
<th>{{ th }}</th>
{%- endfor %}
</tr>
{%- for r in records %}
<tr>
{%- for cn in column_names %}
<td>{{ r[cn] }}</td>
{%- endfor %}
</tr>
{%- endfor %}
</table>
</div>
{%- endif %}
{% endblock -%}
base.html
...
<a href="{{ url_for('show_matchup_history') }}" class="{% block nav_matchups %}{% endblock %}">Matchups</a>
...
app.py
@app.route('/matchup-history', methods=['GET'])
def show_matchup_history():
table_headers = ["Opponent", "Wins", "Losses"]
column_names = ["opponent_owner_name", "wins", "losses"]
matchup_type = request.args.get('matchup_type', default="regular")
owner_id = request.args.get('owner_id', type=int)
owners = queries.get_owners()
if not owner_id:
owner_id = owners[0]['owner_id']
if matchup_type == REGULAR_SEASON:
records = queries.get_matchup_history_regular(owner_id)
else:
records = queries.get_matchup_history_playoffs(owner_id)
return render_template("matchup-history.html".format(matchup_type=matchup_type),
title='Matchup History', table_headers=table_headers, column_names=column_names,
matchup_type=matchup_type, selected_owner=owner_id, owners=owners, records=records)
Flow is now:
Matchups
from navbar will route to /matchup-history
and default to showing regular season matchupsPlayoffs
radio will route to /matchup-history?matchup_type=playoffs&owner_id=12345
Regular
radio will route to /matchup-history?matchup_type=regular&owner_id=12345
dropdown
will route to /matchup-history?matchup_type=regular&owner_id=98765
Upvotes: 2
Views: 4207
Reputation: 3729
So right now you are trying to access the request.form
in a get request. However, the form
will always be empty in a get request because that's the nature of a get request. So only when you access the route @app.route('/matchup-history/<string:matchup_type>'
trough a post request, will it be able to redirect in the right way.
This working miniapp displays it nicely:
from flask import Flask, render_template_string, request
app = Flask(__name__)
TEMPLATE_STRING = """
<form action="{{ url_for('index') }}" method="post">
{{request.form['matchup_type']}}<br><br>
<label><input type="radio" name="matchup_type" value="regular" onclick="this.form.submit()" checked>Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" onclick="this.form.submit()">Playoffs</label>
</form>
"""
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'GET':
return render_template_string(TEMPLATE_STRING)
else:
return render_template_string(TEMPLATE_STRING)
The first time you open the page, you see only the radio button. But as soon as you click on a radio button, it POSTS the form, and therefore you will see the selected value on top of the page now. If you click again, you post the form again, etc.
So how should you solve it? I think that there is no need to do a POST request with this form, because you're not updating any data, you're just querying.
from flask import Flask, render_template_string, request
app = Flask(__name__)
TEMPLATE_STRING = """
<form action="{{ url_for('history') }}" method="get">
<select name="owner_id">
{% for owner in owners %}
<option {% if owner['id'] == selected_owner_id %} selected {% endif %}value="{{owner['id']}}">{{owner['name']}}</option>
{% endfor %}
</select>
<label><input type="radio" name="matchup_type" value="regular" {%if selected_matchup_type == 'regular'%}checked{%endif%} onclick="this.form.submit()">Regular Season</label>
<label><input type="radio" name="matchup_type" value="playoffs" {%if selected_matchup_type == 'playoffs'%}checked{%endif%} onclick="this.form.submit()" >Playoffs</label>
<br>Queried data goes here
</form>
"""
owners = [{'id': 1, 'name': 'bob'}, {'id': 2, 'name': 'gary'}, {'id': 3, 'name': 'tom'}]
matchup_types = 'regular', 'playoffs'
@app.route('/history', methods=['GET'])
def history():
owner_id = request.args.get('owner_id', None, type=int)
if owner_id not in [owner['id'] for owner in owners]:
owner_id = owners[0]['id']
matchup_type = request.args.get('matchup_type', None)
if matchup_type not in matchup_types:
matchup_type = matchup_types[0]
# now you know the owner_id and the matchup type, and know that both are valid, do some query to get table data
return render_template_string(TEMPLATE_STRING, owners=owners,
selected_owner_id=owner_id,
selected_matchup_type=matchup_type,
matchup_types=matchup_types)
I think this is what you need. The form is never posted, by always put as a get request (<form action="{{ url_for('history') }}" method="get">
). If the values are missing or invalid, we default back to some owner/matchup_type. The checked values are remembered, and used to render the template.
This puts all you flask logic in the @app.route
, and all your jinja logic in the template.
Some general remarks:
I think that accessing the request
in jinja not preferable because jinja deals with errors/missing values differently, and if they are a result of logic related to your request, it's becomes hard to guess what's going on. So deal with the incoming request on the python side.
Instead of wrapping having 2 radio blocks depending on the chosen value, just use one block and check within the options if the are to one you need. <option {% if some_value == some_other_value %} checked {% endif%}>blabla</option>
.
Do a lot more input validation! In your first example, you template name is decided by some user inputted value (the matchup type). But what if the user posts a nonexisting value? You get errors.
If the only difference between the two templates is which radio button is selected, you don't need two templates. See the updated version how to just deal with it in one template.
Upvotes: 1