Chaining callbacks

I am new to Dash and find it amazing

.I am trying to create a graph with a dropdown to choose the data to graph
.my data is in a dataframe stored in a hidden html.div with id = ‘the-data’ to share between callbacks
.I first create a dropdown and give it an id : ‘tld’ and send it out to an html.div ‘top-left-dropdown’

@app.callback(Output(‘top-left-dropdown’,‘children’),
[Input(‘the-data’,‘children’)])
def top_left_dropdown(dfs):
fitparams = pd.read_json(json.loads(dfs)[4])
expiry_options = [{‘label’:expiry,‘value’:expiry} for expiry in fitparams.index]
return dcc.Dropdown(id=‘tld’,options = expiry_options ,value=fitparams.index[0])

Then i want to create the graph with another callback
the input here is the dropdown ‘tld’ created above:

@app.callback(
Output(‘top-left-display’,‘children’),
[Input(‘top-left-buttons’,‘value’),Input(‘tld’,‘value’)])
def show1(display,exp):
if display == ‘Graph’:
return skewplot(exp)
elif display ==‘Table’:
return generate_table(exp)

however referencing an id which was created in another callback seems to be impossible:

i get the following error message:

‘dash.exceptions.NonExistantIdException:
Attempting to assign a callback to the
component with the id “tld” but no
components with id “tld” exist in the
app’s layout.’

Is there a solution to this in other words chain callbacks using the output of one as the input of another?

PS I know I could update options and value properties of a dropdown in my app layout instead of updating html.div children property
but the point here is to avoid writing 2 callbacks one for each of options and value as multiple output callbacks are impossible

Dash does support dynamic callbacks, with the caveat that all callbacks must be defined before the app starts. This means that you must have registered every possible callback that could be required (and therefore already pre-generated the corresponding element IDs) ahead of time. See the section All callbacks must be defined before the server starts in the Dash Guide.

1 Like