javascript - python flask dynamic dropdown list - Stack Overflow

i have a flask app at which i want a page to open with two dropdown liststhe first is for the departme

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

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

Share Improve this question asked Dec 26, 2019 at 10:12 abdelrahman khalilabdelrahman khalil 1231 silver badge8 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 3

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>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744751428a4591620.html

相关推荐

  • javascript - python flask dynamic dropdown list - Stack Overflow

    i have a flask app at which i want a page to open with two dropdown liststhe first is for the departme

    16小时前
    30

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信