Flask WTForms dynamic forms dependencies selecField not populate in edit page

Question

I have form to repopulate in edit page, in my form I have three selectField which are interconnected to populate. But my first selectField (Cars) not selected correct value after repopulate in edit page and no error in my code.

This my scenario, when I click edit in table. Data will populate in edit form. But Car selectedField not selected the correct car. See image below...

How to repopulate data in edit page and selected the correct value in selectedfield ?

This my code:

views.py

@bp.route('/edit_orders/<int:obj_id>/edit', methods=['GET'])
def edit_orders(obj_id):
    orders = Order.query.get(obj_id)
    form = OrderForm(obj=orders)
    form.cars.choices = [(c.id, c.car) for c in Car.query.order_by('id')]
    form.models.choices = [(m.id, m.model) for m in Model.query.filter(Model.car_id == orders.cars.id).all()]
    form.versions.choices = [(v.id, v.version) for v in Version.query.filter(Version.model_id == orders.models.id).all()]

    return render_template('edit_order.html', title="Edit Orders", form=form)

model.py

class Car(Base):
    __tablename__ = 'cars'
    id = Column(Integer, primary_key=True)
    car = Column(String(128), nullable=False)
    models = relationship("Model", back_populates="cars") # relationship
    orders = relationship("Order", back_populates="cars")

    def __init__(self, car=None):
        self.car = car

    def __repr__(self):
        return '<Car %r>' % self.car

    @property 
    def serializable(self):
        return {'id':self.id, 'car':self.car}

form.py

# -*- coding: utf-8 -*-
from flask_wtf import Form
from wtforms import SelectField, TextField, validators


class OrderForm(Form):
    cars = SelectField(u'Car', coerce=int)
    models = SelectField(u'Model', choices=[('', '--choose--')])
    versions = SelectField(u'Version', choices=[('', '--choose--')])
    customer_name = TextField(u'Customer', [validators.InputRequired('Customer is required.')])

This all my source code in github. I hope someone can fix my bugs/error. Thanks advanced.

Your question is not so clear, could you please explain clearly what the issue is? — kellymandem, Aug 13 '19 at 07:45
My issue is, I cannot repopulate data and selected the correct data in selectedField car, model and version when load edit form. — Sukma Saputra, Aug 13 '19 at 09:28
If I use .filter_by() my selectField only have one row data. — Sukma Saputra, Aug 13 '19 at 09:59

kellymandem · Answer 1 · 2019-08-13T11:34:51.073

1

May I suggest you follow these tutorials( 1, 2, 3 ) in their order so your application structure can comply with flask application structure best practices and then you can redesign your app accordingly. I was trying to look at your code but it's not that easy to follow, so am not sure I or anyone can help right now.

And if you are interested in populating your database with data with sample data to use initially or for testing you can look at this or this.

NOTE

Fix this line <script type="text/javascript" src="{{ url_for('static', filename='vendor/jquery/dist/jquery.min.js') }}"></script> in base.html because it links to a file that doesn't exist(as per the files downloaded from github page for your application).

And also remove this line <!DOCTYPE html> from the files add_order.html, index.html, and edit_order.html because it's not necessary.

edited Aug 13 '19 at 11:34

answered Aug 13 '19 at 11:29

kellymandem

1,709
3
17
27

Thanks @kellymandem your answer mean a lot to me. But it's not answer my question so I'm not accept that. And I will read the link your suggest. For note your answer, you can read README.md file to run the source form github. – Sukma Saputra Aug 13 '19 at 12:13
@SukmaSaputra You are welcome and yes, I did read the `README.md` file and I followed the instructions in it to run the application locally on my machine. – kellymandem Aug 13 '19 at 12:38

score 0 · Answer 2 · answered Aug 13 '19 at 13:31

0

Hi Sukma Saputra what are you using to generate the view + pagination and search box in the EDIT page?

answered Aug 13 '19 at 13:31

Saul Da Silva

37
5

Thank you i saw it in your github repository :) I hope you solve your issue. – Saul Da Silva Aug 13 '19 at 22:27

score 0 · Accepted Answer · answered Aug 14 '19 at 01:57

I got the answer from this link.

And this my update code to populate dependencies wtforms selecField in my edit page.

views.py

@bp.route('/edit_orders/<int:obj_id>/edit', methods=['GET'])
def edit_orders(obj_id):
    orders = Order.query.get(obj_id)
    form = OrderForm(obj=orders)
    form.car.choices = [(c.id, c.car) for c in Car.query.all()]
    form.model.choices = [(m.id, m.model) for m in Model.query.filter(Model.car_id == orders.cars.id).all()]
    form.version.choices = [(v.id, v.version) for v in Version.query.filter(Version.model_id == orders.models.id).all()]

    form.car.default = orders.cars.id
    form.model.default = orders.models.id
    form.version.default = orders.versions.id
    form.customer_name.default = orders.customer_name
    form.process()

    return render_template('edit_order.html', title="Edit Orders", form=form)

I set default data in form field, and use form.process() to call constructor and give selected value in selectField.

For all code you can get in my github.

Happy coding.

Flask WTForms dynamic forms dependencies selecField not populate in edit page

3 Answers3