Python Flask WTForms Dependent Dropdown

Question

I was wondering if someone could help me.

I want to be able to click on customer and locations be based off of the certain customer, being a dependent dropdown. This information is coming from a database, hence the queries in the following code.

This is my form function for both customer and location

class CustomerPick(SubForm):
    customer = QuerySelectField(u'Customer',
                            get_label=u'sCustomer',
                            query_factory=lambda : 
                            (TCustomer.query.order_by(TCustomer.sCustomer)),
                            validators=[DataRequired(),])
    location = QuerySelectField(u'Location',
                            get_label=u'sLocation',
                            query_factory=lambda : 
                            (TLocation.query.order_by(TLocation.sLocation)),
                            validators=[DataRequired(),])

Here is the view portion

@route('new/', methods=['GET', 'POST'])
def new(self):
    form = CustomerPick()
    if form.validate_on_submit():

This is a picture of the dropdown also for reference, if there is anything else needed for you guys to have a go please let me know. Thanks in advance! Photo

Answer 1

I don't quite get your question but you want to be able to click a user and populate the dropdown based on the location?

This involves some Ajax sending data back and forth. I'll give you a minimized version of code snippet (not tested).

 // front-end - this handles user behavior in dropdown. When a user changes a value
 // in a user drop down, it will send a request to your Flask view function.
 $("#user_drop_down").change(function () {
        let user_identifier = this.value;
        $.ajax({
            type: "GET",
            url:/url_to_flask_view_function/,
            data: {user_identifier: user_identifier},
            success: function (resp) {
                $('#your_designated_div_for_both_dropdowns_div').html(resp.data)
            }
        });
    });

# back-end - this receives the request sent from front-end and process the Flask-WTF
# form options so that it can render different options in the dropdowns. In this view
# function, we will return jsonified template with newly processed form_object
# instead of rendering the option data. You can return the json with only the data
# but it involves more javascript parsing and may be difficult for you.
@app.route('/url_to_flask_view_function/')
def form_processing():
    user_identifier = request.args.get('user_identifier)
    # now we've gotten the user_identifier, you will need to query. Below query is totally made up.
    query_to_where_location = Location.query.filter(Location.user_identifier= user_identifier).first()
   # your query result will not be in a tuple format
   # if your query result is like this "locA, locB, locC, locD", you need to process
   # it so that you make [('locA', 'locA'), ('locB', 'locB').......] 
   form_object = MyForm()

    form_object.location.choices = processed_list
    return jsonify({"data":render_template('template_that_contains_your_drodpdowns.html',
                                   form_obj=form_obj)})

<!-- HTML piece, you should've had this already but make sure to specify your fields in HTML following Jinja2 synthax.-->
<form>
{{form_object.user}}
{{form_object.dropdown}}
</form>

In conclusion, the idea here is that you catch user behavior using .change , then based on the change, you will send request with user_identifier to server side. Once it reaches server-side, you will make a query into the DB and render the same template again with differently processed forms.

The best way to go about doing this is that, once you get the user_identifier into your view, you make query and return jsonified location object, then in your success block, you would alter the of that dropdown input element.

Let me know if you have more questions.