Populate The Drop-down Menu Based On Previous Selection In Flask Python Without Using Ajax?
Solution 1:
If you want to avoid going through an ajax request then you should consider registering your datas on the client side, by using technologies such as IndexedDB.
But if you want to keep your information on the server side, and access it dynamically, here's how you can implement that:
from flask_wtf import FlaskForm
from wtforms import SelectField
from flask import Flask, render_template, request, jsonify
import pandas as pd
class LocationsForm(FlaskForm):
locations = SelectField('Locations')
@app.route('/', methods=['GET', 'POST'])
def dropdown():
total_data = pd.read_csv("CPS.csv")
data = total_data['LOCATION'].unique().tolist()
form = LocationsForm()
form.locations.choices = [(i, i) for i in data]
return render_template(form=form)
@app.route('/device_choice/<value>')
def device_choice(value):
location_choosen = value
df = pd.read_csv("CPS.csv")
df = df.set_index(["LOCATION"])
df1 = df.loc[location_choosen, 'Device'].tolist()
return jsonify({'Devices': df1})
@app.route('/unit_choice/<value>')
def unit_choice(value):
# YOU CAN IMPLEMENT THIS BY FOLLOWING THE SAME MODEL AS THE DEVICES
I create a form that I populate dynamically with the values of the locations only. then I render the form.
In my JS script I put an event that is triggered whenever there is a change in the field of locations.
At each change I send the selected value (location) to the device_choice route and find all the devices associated with this location. I return the devices as a list and fill in the appropriate selectfield (devices)
HTML's SIDE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dropdown</title>
</head>
<body>
{{ form.hidden_tag() }}
{{ form.locations(class_="form-control") }}
<select class="form-control devices" id="devices"></select>
<select class="form-control unit" id="unit"></select>
</body>
<script>
let location = document.getElementById('locations');
let devices = document.getElementById('devices');
location.onchange = function(){
value = location.value;
fetch('/device_choice/' + value).then(function(response){
response.json().then(function(data){
let optionHTML = '';
for(let opt of data.Devices){
optionHTML += '<option value ="' + opt + '">' + opt + '</option>';
}
devices.innerHTML = optionHTML;
});
});
}
</script>
</html>
You just have to apply the same logic for the units too...
Post a Comment for "Populate The Drop-down Menu Based On Previous Selection In Flask Python Without Using Ajax?"