How to reset the n_clicks of a button and value of the input text box after the every callback? Please help

Dash Python
1

Hello All,

In my App I am trying to get the value from the input text box back into the backend code after a button has been clicked. I am able to do it comfortably using dependecies.Input for button and Indepencies.State for input text box.
Now after the callback the pointer returns to the code and performs operation(this is also working) and then loads the page again. How can I reset the n_clicks for button and clear the input Text box on the screen?
I do not want to use the reset button as an extra button on my page.
Please help…

image
image1345×182 4.05 KB

1 Like
2

How are you loading the page again? Do you simply want to re-fetch the layout when you refresh? If so, take a look at the “Updates on Page Load” section of https://dash.plot.ly/live-updates.

3

Thanks for the response. My page gets loaded either by the button click or by tab clicks or by slider.
I saw that link and it takes about dynamic loading where app.layout should be assigned to some function which calls at every load.

Is there not a normal way that those HTML or DCC components gets reset when wanted?

Thanks

4

Since you mentioned the “Reset” button, I assume you have seen this discussion, which uses the following callback:

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

now, since you don’t want a “Reset Button”, can you make the input to the callback one, or all, of (“the button click or by tab clicks or by slider [click]”) — i.e. the components that trigger the page reload? These components may update other Outputs, but you should be able to simultaneously update the DCC n_clicks value, or the html.Input value, using the multiple outputs feature.

This would look something like this:

# reset 
@app.callback([Output('show_button','n_clicks'),
               Output('text_input','value'),
               Output('my_op_result','value')],
             [Input('my_reload_button','n_clicks'),
              Input('my_reload_tab','value'),
              Input('my_reload_slider','value')])
def update(no_clicks, value1, value2):
    my_result = do_my_op()
    return 0, '', my_result
5

Hello,

thanks for suggesting this and I have tried this before but it reset the value locally and when once again the callback happens it reads the values from the page again as n_click=1.
I have done something else . So instead of handling with n_click I have handled through values of Input. It seems to be little bad way of doing it but I was not able to find anything else.

@app.callback([
Output(‘tabs-content-inline’, ‘children’),
Output(‘Table-update’, ‘children’),
Output(‘Table-update’, ‘style’),
Output(‘Contract’, ‘value’),

          ],
          [
            Input('tabs-styled-with-inline', 'value'),
            Input('Count-Slider', 'value'),
            Input('Show-btn','n_clicks')

          ],
          [

            State('Contract', 'value')

          ]

          )

def render_content(tab, slide, clicks, value):

if ( value is None) or (value==' '):
6

Hey All,

Even I wanted an answer for the above question, however currently I’m using a different solution and i’m able to fix the issue as of now. My test case is different from the above but I was able to reset the n_clicks. Try the below code,

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from datetime import datetime as dt

table_main_style_1 = {‘text-align’:‘center’,‘border’:‘0’,‘align’:‘wrap’,‘font-size’:‘14px’}
table_main_style_2 = {‘text-align’:‘center’,‘border’:‘0’,‘vertical-align’:‘top’,‘font-size’:‘14px’}

app = dash.Dash(name)
app.config.suppress_callback_exceptions = True

app.layout = html.Div(
id=‘main-div’,children=[
html.Div(
dcc.Input(
id=‘test1’,
placeholder=‘Enter text’,
value=0,
disabled=False,
), style=table_main_style_2
),
html.Div(
dcc.Input(
id=‘test2’,
placeholder=‘Enter text’,
value=0,
), style=table_main_style_2
),
html.Div(
dcc.Input(
id=‘test3’,
placeholder=‘Enter text’,
value=0,
), style=table_main_style_2
),
html.Button(
‘Next’,
id=‘submit-button’,
n_clicks=0
),
html.Div(id=‘test4’,children=0,
#style={‘display’:‘None’}
),
html.Div(id=‘test5’,children=0,
#style={‘display’:‘None’}
)
])
@app.callback(
dash.dependencies.Output(‘test5’,‘children’),
[dash.dependencies.Input(‘test4’,‘children’)]
)

def test_update_incr(test4_inp):
return test4_inp

@app.callback(
[dash.dependencies.Output(‘test1’,‘disabled’),dash.dependencies.Output(‘test4’,‘children’)],
[
dash.dependencies.Input(‘submit-button’,‘n_clicks’)
],
[
dash.dependencies.State(‘test1’,‘value’),
dash.dependencies.State(‘test2’,‘value’),
dash.dependencies.State(‘test5’,‘children’)
]
)

def test_fun(n_clicks,test1_inp,test2_inp,incr):
if n_clicks > 0 and test1_inp != None and test2_inp != None:
incr_val = int(incr) + 1
return True, incr_val

@app.callback(
dash.dependencies.Output(‘submit-button’,‘n_clicks’),
[dash.dependencies.Input(‘test4’,‘children’)]
)

def reset_button(incr_value):
print(incr_value)
if incr_value > 1:
return 0

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

7

I would like to suggest the following solution. use the state dependencies in the call back function when you want to output something to the same element you have git the input. (e.g. resetting the n_clicks property of an html button element)

[/quote]

@app.callback(
[

reset n_clicks property and text input to values returned by callback function

          Output('my_reload_button','n_clicks'), 
          Output('text_input','value'),
          ],
          [
          Input('my_reload_button','n_clicks_timestamp'),,
          ]
          [
          State('my_reload_button','n_clicks'),
          State('text_input','value'),
          ]

)
def update(n_clicks_timestamp, n_clicks, value):
my_result = do_my_op()
…

set n_clicks property = 0 and clear input_text = ‘’‘’ to an empty string

n_clicks =0
value = ‘’‘’
return (n_clicks,value)

[/quote]

you will find further detailed information in