Run multiple callbacks for a button

Dash Python
1

Hi,
I am trying to run 2 callbacks for one button: one to clear containers and the second to print some value in one of the cleared containers. However, the second callback is not firing. The code is here:

app.layout = html.Div([
    html.H1("Please enter Labman ID to view USN"),
    html.Div([
        "Enter the ID here: ",
        dcc.Input(id='id', value='', type='text'),
        html.Button('Submit', id="submit_id", n_clicks=0), html.H6(id='error_text'),
    ]),


@app.callback(
    [Output('output1', 'children'), Output('output2', 'children')],
    Input('submit_id', 'n_clicks'),
    prevent_initial_call=True,
)
def update_output_div(n_clicks):
        if n_clicks:
            return '',''

@app.callback(
    Output('output1', 'children'),
    Input('submit_id', 'n_clicks'),
    prevent_initial_call=True,
)
def update_output_div(n_clicks,):
    return n_clicks

Do you know how I can get both callbacks firing?

2

Hi @subodhpokhrel7

Please run your app with debug= True and check for errors.

I don’t understand why don’t you just update the children instead of trying to clear them first.

app.layout = html.Div([
    html.H1("Please enter Labman ID to view USN"),
    html.Div([
        "Enter the ID here: ",
        dcc.Input(id='id', value='', type='text'),
        html.Button('Submit', id="submit_id", n_clicks=0), html.H6(id='error_text'),
    ]),


@app.callback(
    Output('output2', 'children'),
    Input('submit_id', 'n_clicks'),
    prevent_initial_call=True,
)
def update_output_div(n_clicks):
        if n_clicks:
            return ""

@app.callback(
    Output('output1', 'children'),
    Input('submit_id', 'n_clicks'),
    prevent_initial_call=True,
)
def update_output_div(n_clicks,):
    return n_clicks
3

Hi @AIMPED , I am querying data from a database and it takes some time for it to load. I want to clear the previous output as it will give a feeling that a new set is being loaded (will probably also add a progress bar or loading icon later). I did find the solution though:

app.layout = html.Div([
    html.H1("Please enter Labman ID to view USN"),
    html.Div([
        "Enter the ID here: ",
        dcc.Input(id='id', value='', type='text'),
        html.Button('Submit', id="submit_id", n_clicks=0), html.H6(id='error_text'),
    ]),


@app.callback(
    Output('output1', 'children', 'allow_duplicate=True'),
    Input('submit_id', 'n_clicks'),
    prevent_initial_call=True,
)
def update_output_div(n_clicks):
        if n_clicks:
            return ""

@app.callback(
    Output('output1', 'children'),
    Input('submit_id', 'n_clicks'),
    prevent_initial_call=True,
)
def update_output_div(n_clicks,):
    return n_clicks
4

debug=True is your friend :rofl:

Out of curiosity, how do you assure, that the “clearing” callback gets triggered first? And is there really a noticable differenece for the user if you just have one callback, the second one?

1 Like