'Python dash state - submit button refreshes site right after the action

I have basically downloaded the sample from Dash's website:

        html.Div([
            html.Label("Please type in an instrument:", style={}),
            html.Br(),
            dcc.Input(className="form-control mx-auto", style={"width": "50vh", "display": "inline-block"}, id='instrument', value="^IXIC"),
            html.Button("Submit", className="btn btn-secondary btn-sm", style={"margin-left": "2em"}, id='button'),

            dcc.Input(id='input-1-state', type='text', value='Montréal'),
            dcc.Input(id='input-2-state', type='text', value='Canada'),
            html.Button(id='submit-button-state', n_clicks=0, children='Submit'),
            html.Div(id='output-state')

        ], className="form-group")

...

@app.callback(Output('output-state', 'children'),
              Input('submit-button-state', 'n_clicks'),
              State('input-1-state', 'value'),
              State('input-2-state', 'value'))
def update_output(n_clicks, input1, input2):

    return u'''
        The Button has been pressed {} times,
        Input 1 is "{}",
        and Input 2 is "{}"
    '''.format(n_clicks, input1, input2)

And I noticed that the script in theory works, the data does change, but after one microsecond later the whole website refreshes turning back to the initial state. What am I doing wrong?

python plotly-dash

Solution 1:^[1]

For the future generations, I do not know what exactly caused the problem, but it started working well after I simply added type='button' to the submit button.

html.Button(id='submit-button-state', n_clicks=0, children='Submit', type='button')

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Fatafim

'Python dash state - submit button refreshes site right after the action

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]