python flask dynamic dropdown list

Question

i have a flask app at which i want a page to open with two dropdown lists the first is for the department and the second is for the user i want to dynamically change user whenever i change the department in the same page

I can't use a post request as i need next to make a post request to get the user's specific details here's my try


@app.route('/ITMODE/Users/', methods=['GET',  'POST'])
@login_required
def UserModifier():
        if Session.get('user_id') is None or Session['dept_id']!=1:
            return redirect(url_for('login'))
        else:
            if request.method == 'GET':
                departments= session.query(Department)
                #UserRequests= session.query(Requests).order_by(desc(Requests.Record_Created)).all()
                return render_template('DefaultAdminSelectDepartment.html', title='Users' ,dept=departments)
            else:
                department_id = request.form.get('departments')
                Session['department_id']=department_id
                return redirect(url_for('UserModifierDept'))

@app.route('/ITMODE/Users/departments/', methods=['GET',  'POST'])
@login_required
def UserModifierDept():
        if Session.get('user_id') is None or Session['dept_id']!=1:
            return redirect(url_for('login'))
        else:

            if request.method == 'GET':
                department = Session['department_id']
                departments= session.query(Department)
                Users=session.query(User.name).filter(User.dept_id==department).order_by(User.name)
                return render_template('DefaultAdminManageUsers.html', title='Users' ,users=Users,dept=departments)

this is the main part of :DefaultAdminSelectDepartment.html

    <br>
    <form method="POST">
      <label for="departments">Departments : </label>
      <select name="departments" id="departments"  onchange='this.form.submit()' onfocus="this.selectedIndex = -1;">
        {% for item in dept %}
        <option value="{{ item.id }}">{{item.Dept_name}}</option>
        {% endfor %}
      </select>
      <noscript><input type="submit" value="Submit"></noscript>
      </form>

and this is the main part of : DefaultAdminManageUsers.html

 <form method="PUT">
      <label for="departments">Departments : </label>
      <select name="departments" id="departments"  onchange='this.form.submit()' onfocus="this.selectedIndex = -1;">
        {% for item in dept %}
        <option value="{{ item.id }}">{{item.Dept_name}}</option>
        {% endfor %}
      </select>
      <noscript><input type="submit" value="Submit"></noscript>
      </form>
      <form method="POST">
        <label for="users">Users : </label>
        <select name="users" id="users"  onchange='this.form.submit()' onfocus="this.selectedIndex = -1;">
          {% for user in users %}
          <option value="{{ user.id }}">{{user.name}}</option>
          {% endfor %}
        </select>
        <noscript><input type="submit" value="Submit"></noscript>
        </form>

the put request part is a failed try the main problem is handling two post requests from same html template or somehow make the dropdowns dynamic as if the department changes the users in the other dropdown are changed

roganjosh · Accepted Answer · 2019-12-26 11:21:02Z

You can do this with a POST request, but not via a traditional form. I can't make a verified working example because it's just too much to test against. However, there's a couple of things you need.

First, you need a helper function that is going to filter the user list based on department.

@app.route('ITMODE/Users/get_user_list', methods=['POST'])
def get_user_list():

    req = request.json
    department_id = req.get('department_id')
    users = (session.query(User.name)
                    .filter(User.dept_id==int(department_id)
                    .order_by(User.name)
                    .all()))
    return users

For this to work, you need a script watching for changes on the department dropdown. When a value is selected from that list, you want to trigger a POST request using AJAX and update the user dropdown list. I don't know whether you're using flask-csrf but I've included that just in case (you can omit it otherwise).

Your first dropdown will look something like:

<br> 
<label for="departments">Departments : </label>
<select name="departments" id="departments" onfocus="this.selectedIndex = -1;">
   {% for item in dept %}
   <option value="{{ item.id }}">{{item.Dept_name}}</option>
   {% endfor %}
</select>

Note that I've removed the form. Then the function that will make the request:

<script>
document.getElementById('departments').onchange = function() {
    var department_id = this.value;

    var csrf_token = "{{ csrf_token() }}";

    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrf_token);
            }
        }
    });

    $.ajax({
        type: 'POST',
        data: JSON.stringify({
            'department_id': department_id,
        }),
        contentType: 'application/json; charset=utf-8',
        url: "{{ url_for('get_user_list') }}",
        success: function(data) {
            $("#users").empty();
            for (var i = 0; i < data.length; i++) {
                $("#users").append('<option value="' + data[i].id + '">' + data[i].Dept_name + '</option>');
            }
        }
    });
}
</script>

Collectives™ on Stack Overflow

python flask dynamic dropdown list

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related