I want to create a dropdown form for a small project that I am doing. It has 4 tables, ProductType, ProductSubType, Materials, ProductList, all of which are linked. So, what I want is, if I select a specific product type, I get the corresponding ProductSubType(s) inside that. After clicking on a particular SubType, I get the Material(s) inside that and so on.
Initially, I did this using a smartgrid, but the problem is I have to stick to a specific UI (according to orders), and I can't make that happen using a smartgrid.
For better understanding,
Here are my tables,
db.define_table('ProductType',
Field('Name','string',requires=IS_NOT_EMPTY()),
Field('TypeID',requires=IS_ALPHANUMERIC()),
format='%(Name)s'
)
db.define_table('ProductSubType',
Field('Name','string',requires=IS_NOT_EMPTY()),
Field('SubTypeID','string',requires=IS_ALPHANUMERIC()),
Field('ParentType','reference ProductType'),
format='%(Name)s'
)
db.define_table('Material',
Field('Name','string',requires=IS_NOT_EMPTY()),
Field('MaterialID',requires=IS_ALPHANUMERIC()),
Field('Parent','reference ProductSubType'),
format='%(Name)s'
)
db.define_table('ProductList',
Field('Name','string',requires=IS_NOT_EMPTY()),
Field('Company','string'),
Field('Colour'),
Field('Gender'),
Field('Price',requires=IS_INT_IN_RANGE(0,99999)),
Field('ProductSize', requires=IS_ALPHANUMERIC()),
Field('Specifications'),
Field('Purpose'),
Field('ProductID',requires=IS_ALPHANUMERIC()),
Field('ParentMaterial','reference Material'),
Field('Image','upload'),
format='%(Name)s'
)
PFA the UI that I have to stick to.
What I have tried is this.
def index():
"""
example action using the internationalization operator T and flash
rendered by views/default/index.html or views/generic.html
if you need a simple wiki simply replace the two lines below with:
return auth.wiki()
"""
select_type = FORM(LABEL('Sports Goods',INPUT(_type='radio',_id='selectgood',_name='selected_type_good',_autocomplete='off',_value='sport-good',value=request.vars.selected_type_good),_class='btn btn-primary active'),(LABEL('Sports Apparels',INPUT(_type='radio',_id='selectapparel',_name='selected_type_good',_autocomplete='off',_value='sport-apparel',value=request.vars.selected_type_good),_class='btn btn-info')),_class='btn-group',_data={'toggle':'buttons'},_id='type-form')
product_subtype_SG_list = db(db.ProductSubType.ParentType == 1).select(db.ProductSubType.Name)
product_subtype_SG = FORM(SELECT(OPTION('Select Sports Goods',_selected=1,_disabled=1,_hidden=1),*[OPTION(*rows.Name) for rows in product_subtype_SG_list],_id = 'form-goods',_class='form-control',_name='selected_good',value=request.vars.selected_good),_id='select-goods')
product_subtype_SA_list = db(db.ProductSubType.ParentType == 2).select(db.ProductSubType.Name)
product_subtype_SA = FORM(SELECT(OPTION('Select Sports Apparels',_selected=1,_disabled=1,_hidden=1),*[OPTION(*rows.Name) for rows in product_subtype_SA_list],_id = 'form-apparels',_class='form-control',_name='selected_apparel',value=request.vars.selected_apparel),_id='select-apparels')
s=request.vars.selected_good
return dict(select_type=select_type,product_subtype_SG = product_subtype_SG,product_subtype_SA = product_subtype_SA,s=s)
But the problem is after I select anything from the first dropdown, no responses are recorded and the page reloads.
Please help.
PS- Please check the UI attached for better understanding. After the first dropdown is selected, the data inside the selected option will appear
in another dropdown list(all tables are linked). Also attached is the .w2p file that I have worked on.