Button Callback not working

Dash Python
1

This is probably a simple solution, but I’ve been staring at it too long and can’t figure out why it’s not responding. I have a button next to an input that when clicked should clear the input. (Since the input doesn’t have an clearable option).

Here is the layout of the input and button:

                                dbc.Row([
                                    html.Div([
                                        html.P('Window:'),
                                        dcc.Input(
                                            type='number', 
                                            min=0,
                                            style={'width': '100px'},
                                            id={
                                                'type': 'savgol-window',
                                                'index': n1
                                            }
                                            ),
                                        dbc.Button(
                                            'Clear',
                                            color='secondary',
                                            outline=True,
                                            id={
                                                'type': 'clear-savgol-window',
                                                'input': n1
                                            },
                                            style={'width': '75px'},
                                            n_clicks=0
                                        )
                                    ],
                                    style={'display': 'flex', 'justify-content': 'center', 'gap': '20px', 'align-items': 'baseline', 'margin-top': '20px'})
                                ],
                                id={
                                    "type": 'savgol-window-input',
                                    'index': n1
                                })

and here is the callback:

@callback(
    Output({'type': 'savgol-window', 'index': MATCH}, 'value'),
    Input({'type': 'clear-savgol-window', 'index': MATCH}, 'n_clicks'),
    State({'type': 'savgol-window', 'index': MATCH}, 'value')
)
def clear_savgol_input(n, value):
    if ctx.triggered_id == 'clear-savgol-window':
        return ''
    else:
        return value

Thoughts?

2

ctx.triggered_id returns a dictionary if using pattern matching. So you have to do something like ‘’’ if ctx.triggered_id["type"] == something

3

Okay so I changed the callback to this and it’s still not working:

@callback(
    Output({'type': 'savgol-window', 'index': MATCH}, 'value'),
    Input({'type': 'clear-savgol-window', 'index': MATCH}, 'n_clicks'),
    State({'type': 'savgol-window', 'index': MATCH}, 'value')
)
def clear_savgol_input(n, value):
    if ctx.triggered_id['type'] == 'clear-savgol-window':
        return ''
    else:
        return value
4

Hi @bpolasek ,

You have a typo here:

                                        id={
                                            'type': 'clear-savgol-window',
                                            'input': n1

input instead of index

2 Likes
5

I KNEW it had to be that simple and that I just wasn’t seeing it. Thank you!

1 Like
6

Should I be concerned that I’m getting the error:

Callback error updating {"index":["MATCH"],"type":"savgol-window"}.value

TypeError: ‘NoneType’ object is not subscriptable.

It works when I ignore it, but didn’t know if there was a fix.

7

If your callback is really like this (not an MRE) you could do something like this, it should work.

@callback(
    Output({'type': 'savgol-window', 'index': MATCH}, 'value'),
    Input({'type': 'clear-savgol-window', 'index': MATCH}, 'n_clicks'),
)
def clear_savgol_input(n):
   if not n:
       raise dash.exceptions.PreventUpdate
   return ''

There is only one way to trigger your callback, so the if statement is somehow not necessary.

2 Likes
8

Thank you!