I have a function that takes two inputs and a button to generate a table. It was working well until I placed the inputs and the button in a tab. Now the function does not recognize the button Id.
I get an error while loading the app. Function "displayDVFiltre" is not able to find component ids "VF_button" and "result". Most likely because they are generated during the "render_content" callback.
informations = html.Div([dcc.Tabs(id="tabs-styled-with-inline", value='VF', children[dcc.Tab(label='Ventes historiques', value='VF', disabled=False)], style=tabs_styles), html.Div(id='tabs-content inline')])
@app.callback(Output('tabs-content-inline', 'children'),
Input('tabs-styled-with-inline', 'value'))
def render_content(tab):
if tab == 'VF':
return VF_tab
VF_tab = dbc.Card(
dbc.CardBody(
[
html.H5("Historique des ventes immobilières"),
dbc.Input(id="cp", placeholder="Code postal", type="text"),
dbc.Input(id="cd", placeholder="Code cadastral", type="text"),
dbc.Button("Voir les ventes", id="VF_button", color="dark"),
html.Div(id="result"),
]
),
className="mt-3",
style=tab_style_inside
)
@app.callback(
Output("result", 'children'),
Input("VF_button","n_clicks"),
State("cp","value"),
State("cd","value")
)
def displayDVFiltre(click, codePostal, codeCadastral):
if click:
df = vf.valeurFonciereParCPetCodeCadastal(codePostal, codeCadastral)
print(df.columns)
return dash_table.DataTable(df.to_dict('records'), [{"name": i, "id": i} for i in df.columns])
else:
return {}