Clear Div on click

Dash Python
1

I have a Div that populates with a DashTable after I click the ‘Submit’ button. I also have a ‘Clear’ button that I want to use so that the Div gets cleared. It’s the same div, but I don’t know how to include it in my app.callback so that it works, I get an ‘list is out of range’ error.

app.layout = html.Div(children=[

html.H1(children='Project'),
dcc.Dropdown(id='my-identifier-type'),
dcc.Input(id='my-identifier'),
html.Button('Submit',id='submit-button'),
html.Button('Clear',id='clear-button'),

html.Div(id='charac_table',
         style={'marginBottom': 50, 'marginTop': 25, 'width':'20%', 'display':'block'})

@app.callback(
Output(‘charac_table’, ‘children’),
[Input(‘submit-button’, ‘n_clicks_timestamp’),
Input(‘my-identifier-type’, ‘value’),
Input(‘my-identifier’, ‘value’),
Input(‘clear-button’,‘n_clicks’)])
def update_my_view(click_timestamp, identifier_type, identifier_input, x_click):

     if x_click > 0:
        my_display = 'none'

        return html.Div(style={'display':my_display})

    elif click_timestamp > ((datetime.now() - timedelta(seconds=0.5)).timestamp()*1000):

       my_display = 'inline-block'

       return html.Div([
            html.Div(id='charac_table'),
            dash_table.DataTable(
            id = 'characteristics',
            columns = [{"name":i, "id":i} for i in des_table.columns],
            data = des_table.to_dict("rows"),
            style_header={
            'backgroundColor': 'White',
            'fontWeight': 'bold'
            },
            style_table={'maxwidth': '10'},
            style_cell={'width':'10'},
            sorting_type='multi',
            selected_rows=[])
            ],
            style={'width':'80%', 'display':my_display, 'margin-bottom': '1.0em'})
2

In another forum post (can’t recall which one), I found the following code snippet.

dash.callback_context.triggered[0]['prop_id'].split('.')[0]

This returns the ID of the input that triggered the callback. Here is a snippet that shows this - modify as needed.

@app.callback(
    output=Output('data-container', 'children'),
    inputs=[Input('Submit', 'n_clicks'),
            Input('Clear', 'n_clicks')],
def your_callback(submit_clicks, options_click):
    user_click = dash.callback_context.triggered[0]['prop_id'].split('.')[0]

    callback_states=dash.callback_context.states.values()
    callback_inputs=dash.callback_context.inputs.values()

    if not user_click or user_click == 'Submit':
       # do something
    else:
      # do something else

Also, dash.callback_context.states.values() provides current values of the states when the callback was triggered. dash.callback_context.inputs.values() is the equivalent for inputs. I eventually combined all dash.callback_context calls into a function for readability.