How to implement reset button to clear output

Dash Python
1

I am trying to implement a reset button to clear input. But I got stuck on: once the reset button is push, I cannot aggregate again. Here is a sample of my idea:

import dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Div(id='output'),
    html.Button('Input',id='input_button',n_clicks=0),
    html.Button('Reset',id='reset_button', n_clicks=0),
])

@app.callback(Output('output','children'),
             [Input('input_button','n_clicks'),
              Input('reset_button','n_clicks')])
def update(input_clicks, reset):
    if input_clicks>0 and reset==0:
        return f'there are {input_clicks} input clicks, and {reset} reset_clicks.'
    elif reset>0:
        reset=0
        return 'all clear'
    
app.run_server()

I found this thread to be very similar to my question, but couldn’t quite figure out how to do it still. Can someone give me some suggestion?

Thanks in advance.

2

Hi mike, hope the code below helps.
spiraf9fLe

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Div(id='output'),
    html.Button('Input',id='input_button',n_clicks=0),
    html.Button('Reset',id='reset_button', n_clicks=0),
], style={'marginTop':20, 'marginLeft':20})

@app.callback(Output('output','children'),
             [Input('input_button','n_clicks')])
def update(input_clicks):
    if input_clicks>0:
        return f'there are {input_clicks} input clicks.'

@app.callback(Output('input_button','n_clicks'),
             [Input('reset_button','n_clicks')])
def update(reset):
    return 0


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like
3

Thank you! This is very helpful. I didn’t know that the button itself can be the destination of a output, so your example will be very useful for me.

4

I really love this solution, as I’m having a similar issue. However I’m having trouble as I have multiple ‘reset’ buttons (same id, using pattern matching callbacks). Do you have any idea as to what I would return to make this work for multiple ‘reset’ buttons?