Python Forum

Full Version: Python Flask Dependent Dropdown
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hello,

I was wondering if one of you could possibly help me with a problem I'm having. The details are listed in the stack overflow link, please advise. Thank you in advance.

https://stackoverflow.com/questions/5295...2_52957198
Hello,
we would much rather see if you explained the problem here, as well as post the code in Python code tags. Thanks.
(Oct-24-2018, 04:59 PM)j.crater Wrote: [ -> ]Hello,
we would much rather see if you explained the problem here, as well as post the code in Python code tags. Thanks.

Sure no problem:

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! https://i.stack.imgur.com/Nzf5J.png
This is almost entirely a javascript thing, using ajax to populate the location dropdown. On the server side, you'll need to write a small function that takes a customer id, and returns locations for them. I don't know what database wrapper you're using, so you'll have to obviously change a few things to make it work, but it'll end up looking roughly like: (I'm freehanding this code without trying any of it, so there might be obvious syntax errors fyi)
# with your imports...
from flask import jsonify

# with your other routes...
@route("/location/:customer_id")
def lookup_location(self, customer_id):
    locations = self.db.Locations.find_by_customer(customer_id)
    return jsonify(locations)
Then, in js, create an event handler to watch for change events, and update the locations accordingly. With jquery, it'd look a little like:
<script type="text/javascript">
$(function() {
    $("#customer_dropdown").change(function() {
        var customer_id = $(this).val();

        $.ajax(
            {
                url: "/location/",
                type: "post",
                dataType: "json",
                data: {
                    customer_id: customer_id
                }
            })
            .done(function(data) {
                // clear any locations currently there
                $("#location_dropdown").html("");
                
                for (var ndx = 0; ndx < data.length; ndx++) {
                    var item = data[ndx];
                    var option = document.createElement("option");
                    option.value = item["value"];
                    option.text = item["description"];
                    $("#location_dropdown").append(option);
                }
            });
    });
});
</script>