✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Chained callbacks not working

Hi,

I am trying to register 3 callbacks in my app.

Below are their signatures:

  1. @app.callback(
    [Output(‘table-dropdown’,‘data’),
    Output(‘table-dropdown’,‘selected_rows’),
    Output(‘alert-div’,‘children’),
    Output(‘refresh-div’,‘hidden’)],
    [Input(‘submit-button’,‘n_clicks’)],
    [State(‘table-dropdown’, ‘selected_rows’),
    State(‘table-dropdown’, ‘data’)])
    def update_datatable(n_clicks, selected_rows, data):

  2. @app.callback(
    Output(‘textarea-example’,‘value’),
    [Input(‘table-dropdown’, ‘selected_rows’)],
    [State(‘table-dropdown’, ‘data’)])
    def update_email(selected_rows ,data):

  3. @app.callback(
    Output(‘table-dropdown’, ‘selected_rows’),
    [Input(‘table-dropdown’, ‘active_cell’)],
    [State(‘table-dropdown’, ‘selected_rows’)])
    def update_selection(active_cell, selected_rows):

The problem is that my app works fine when I use only first 2 callbacks and NOTHING works when I add the third callback. What is the reason for this ?
Sorry if it is a very trivial query, I have just started using dash.

could you try upgrading dash and let us know if you’re still facing the issue? we recently fixed many callback resolution bugs

@chriddyp, I am still getting the same issue even after upgrade. Please help

OK, thanks for trying to upgrade! Could you simplify your code into a simple, reproducible example that we can run on our machines? Thanks!

@chriddyp
Below is the code. Tried to strip it and reproduced the error.
To reproduce:

  1. Run code as it is. Select a radio button. Text area will be filled with value. Click on “Create” button. Selected row will be removed from table above.
  2. Un-comment the third callback re-run.
  3. Perform above steps and nothing will work. e.g. selecting radio button will not populate text area

df = pd.DataFrame(np.random.randint(0,100,size=(5, 4)), columns=list(‘ABCD’))

app = dash.Dash(name, external_stylesheets=[dbc.themes.BOOTSTRAP])

create_button = dbc.Container([ dbc.Row( [ dbc.Button(‘Create’, id=‘submit-button’, n_clicks=0, color=“primary”),
dbc.Button(‘Refresh’, id=‘refresh-button’, n_clicks=0, color=“success”)],
justify=“center”, align=“center”, className=“h-50”)
],style={“height”: “10vh”}
)

app.layout = html.Div([ html.Div(id=‘alert-div’),
html.Div([
dash_table.DataTable(
id=‘table-dropdown’,
data = df.to_dict(‘records’),
columns=[
{‘id’: ‘A’, ‘name’: ‘A’, ‘editable’: False},
{‘id’: ‘B’, ‘name’: ‘B’},
{‘id’: ‘C’, ‘name’: ‘C’},
{‘id’: ‘D Group’, ‘name’: ‘D’},
],
css = [{‘selector’: ‘tr:hover’, ‘rule’: ‘backgroundColor: pink;’}],
editable=True,
row_selectable=‘single’,
selected_rows=
),
html.Div(id=‘table-dropdown-container’)
], style={‘display’: ‘inline-block’}),
dcc.Loading(id=“loading-1”, children=[html.Div(id=“loading-output-1”)], type=“default”),
html.Div([
dcc.Textarea(
id=‘textarea-example’,
value=‘Please select a row above to display the contents in this area’,
style={‘width’: ‘100%’, ‘height’: 300, ‘fonSize’: 21},
disabled=True,
),
create_button,
html.Div(id=‘textarea-example-output’, style={‘display’: ‘inline-block’, ‘whiteSpace’: ‘pre-line’})
])
], style={‘marginLeft’: 30, ‘marginRight’: 30, ‘display’: ‘inline-block’})

@app.callback(
[Output(‘table-dropdown’,‘data’),
Output(‘table-dropdown’,‘selected_rows’),
Output(‘alert-div’,‘children’),
Output(‘refresh-button’,‘disabled’),
Output(‘submit-button’,‘disabled’)],
[Input(‘submit-button’,‘n_clicks’)],
[State(‘table-dropdown’, ‘selected_rows’),
State(‘table-dropdown’, ‘data’)],
prevent_initial_call=True)
def update_datatable(n_clicks, selected_rows, data):
global df
print("\nupdate_datatable")
alert = None
refresh_hide = True
create_hide = False
if n_clicks:
if selected_rows:
df = df.drop(selected_rows[0]).reset_index(drop=True)
selected_rows =
return (df.to_dict(‘records’), selected_rows, alert, refresh_hide, create_hide)

@app.callback(
Output(‘textarea-example’,‘value’),
[Input(‘table-dropdown’, ‘selected_rows’)],
[State(‘table-dropdown’, ‘data’)],
prevent_initial_call=True)
def update_textarea(selected_rows ,data):
print("\nupdate_email")
#print(selected_rows)
if selected_rows:
return data[selected_rows[0]][‘A’]
else:
return “Please select a row above to display the contents in this area”

‘’’@app.callback([Output(‘table-dropdown’,‘data’),
Output(‘table-dropdown’,‘selected_rows’),
Output(‘refresh-button’,‘disabled’),
Output(‘submit-button’,‘disabled’)],
[Input(‘refresh-button’,‘n_clicks’)],
prevent_initial_call=True)
def refresh_emails(n_clicks):
print("\nrefresh_emails")
refresh_hide = False
create_hide = False
if n_clicks:
refresh_hide = True
create_hide = False
return (email_df.to_dict(‘records’), , refresh_hide, create_hide)’’’

if name == ‘main’:
app.run_server(debug=False)

@chriddyp, were you able to reproduce the issue? Did u get any solution ?