The annotation label structure is nested: the typical label has a parent label and several child labels. Labels on the same level in the tree should appear in the same SelectField, and based on the selection in that SelectField, the choices on the SelectField to its right should populate dynamically by querying the child labels of the selection from the database.
After doing some research, it appears that the best approach is to use JavaScript to update the options of the second SelectField based on the user's choice in the first SelectField.
What needs to be done?
[x] Set up the Flask Form, leaving the choices of the second SelectField empty
[x] Create a new function to query the database and fetch the child labels of the selection
[x] Update the HTML template to use JavaScript (specifically, make an AJAX request to the server to get the updated choices for the second SelectField)
[x] Create a new Flask route to handle the dynamic updates of the second SelectField. This route should contain JSON data containing the updated choices for the second SelectField. Use flask.jsonify.
Summary
The annotation label structure is nested: the typical label has a parent label and several child labels. Labels on the same level in the tree should appear in the same
SelectField
, and based on the selection in thatSelectField
, the choices on theSelectField
to its right should populate dynamically by querying the child labels of the selection from the database.After doing some research, it appears that the best approach is to use JavaScript to update the options of the second
SelectField
based on the user's choice in the firstSelectField
.What needs to be done?
SelectField
emptySelectField
)SelectField
. This route should contain JSON data containing the updated choices for the secondSelectField
. Useflask.jsonify
.Useful links
Relates issues
34
Updates
Lorem ipsum dolor sit amet, consectetur adipiscing.