Hey everyone,
i am building a search mask in dash in order to query a database later on. The user should be able to select the search keys via dropdowns,
and depending on the choice of the previous dropout, the components in the next html.Div should vary, so the created component decides the following.
example:
app.layout=html.Div([html.Label(‘Choose key’),
dcc.Dropdown(id=‘drop_key_0’,options=options,value=’’),
html.Div(id=‘next_div_0’),
html.Div(id=‘next_div_1’)])
@app.callback(Output(component_id=‘next_div_0’,component_property=‘children’),
[Input(component_id=‘drop_key_0’,component_property=‘value’)])
def gen_new_dep_drop(value0):
if value0 == ‘’:
raise PreventUpdate
else:
if value0==‘A:
return(html.Label(‘You chose A’),html.dcc(dropdown=optionsA))
else:
return(html.Label(‘You chose B’),html.dcc(dropdown=optionsB),html.Input(place_holder=’’))
@app.callback(Output(component_id=‘next_div_1’,component_property=‘children’),
[Input(component_id=‘drop_key_0’,component_property=‘value’),
Input(component_id=‘next_div_0’,component_property=‘value’)])
def gen_new_dep_drop(value0,value1):
if value0 == ‘’ or value==’’:
raise PreventUpdate
else:
if value0==‘A’ and value1=‘A’:
return(html.Label(‘You chose C’),html.dcc(dropdown=options))
else:
return(html.Label(‘You chose B’),html.dcc(dropdown=options),html.Input(place_holder=’’))
The problem is, i can not access the value, because div has only children and the in the first callback generated html components dont have
a id. I cannot specifiy the ids priorly, because they very with respect to the choice made in the first dropdown. So is there a way
to access the component value afterall?
Many thanks in advance