Working on my personal project recently I had to populate a dropdown menu dynamically in flask. I did not want to incorporate any javascript for this as I wanted my page to be fully javascript free. The method is pretty simple and straightforward. A summary of it - I passed a POST request to the same page using a form and evaluating against the POST request I passed different variables. Let me make it clear.
Pasting the snippet of my html page-
---
{% extends "base.html" %}{% block content %}<form name="team_selection" action="{{ url_for('stats')}}" method='POST'><select name="team"> {% if(team)%} <option value="{{ team }}">{{team}}</option> {% else %} <option selected="selected" value="default">Select a Team</option> {% endif %} <option value="Arsenal">Arsenal</option> <option value="Aston Villa">Aston Villa</option> <option value="Burnley">Burnley</option> <option value="Chelsea">Chelsea</option> <option value="Crystal Palace">Crystal Palace</option> <option value="Everton">Everton</option> <option value="Hull City">Hull City</option> <option value="Leicester">Leicester</option> <option value="Liverpool">Liverpool</option> <option value="Manchester City">Manchester City</option> <option value="Manchester United">Manchester United</option> <option value="Newcastle United">Newcastle United</option> <option value="Queens Park Rangers">Queens Park Rangers</option> <option value="Southampton">Southampton</option> <option value="Stoke City">Stoke City</option> <option value="Sunderland">Sunderland</option> <option value="Swansea City">Swansea City</option> <option value="Tottenham Hotspur">Tottenham Hotspur</option> <option value="West Bromwich Albion">West Bromwich Albion</option> <option value="West Ham United">West Ham United</option></select><button type="submit">Get Players</button>{% if(players) %} <select name="player"> {% for player in players %} <option value="{{ player.first_name }} {{ player.second_name }}">{{ player.first_name }} {{ player.second_name }}</option> {% endfor %} </select>{% endif %}{% endblock %}</form>
---
What here I am essentially tryin to do is to populate a drop down of the players in accordance with the team being selected.
Please note - this html page extends a base.html of mine and it has nothing that has to do with this snippet, hence am ignoring it.
If we see here, there are two if conditions one on team and the other on players.
My first if condition comes into use later, so lets ignore that for the time being.
The second if condition decides whether to display the second drop down or not. If a variable 'players' is passed, then the second drop down is populated based on the value in players. So when the page is initally requested there is only one drop down, that is of the team. Now, when we select a team, the page is reloaded with a second drop down listing the players of the team.
Looking at the python-flask code
---
@app.route('/')
@app.route('/stats', methods=['GET', 'POST'])
def stats():
if request.method == 'POST': #The intial request to the page is a GET hence this if is not satisified which takes us directly to the else part
team_name = team_dict.get(request.form.get('team')) # I have maintained a dictionary for short form of team names, this allows me to fetch them.
docs = db.pdataGWX.find({"team_name":team_name},{"first_name":1,"second_name":1})
return render_template("stats.html", team=request.form.get('team'), players=docs)
else:
return render_template("stats.html") #During the initial request no variable is passed and the plain page is rendered, hence the second 'if' in the template page fails.
---
Initial request to the page would be a GET request hence, the 'if' condition checking for the POST request fails leading to the else part which is rendering the 'html' page. No variable is passed here.
During the submission of the form in the 'html' page the POST request is validated and hence the rest of the code works. Then we pass the variables team and players(which is just fetched) to the html page.
Now coming back to the html page and the first if condition, I placed that condition to make the drop down select the current team selected, hence it checks for the team variable which is passed and adjusts accordingly.
Now since the players variable is also passed the second if condition works and we have a new drop down activated with the names of the players.
Thanks for reading.
Please correct if the methodology is not proper or if there is some bug in this. I have just started with Flask and yet to learn many new things.
