Problem with chained callbacks

Dash Python
1

I have a pretty complex app where I need to go through differnt steps where user input is required and the content from the previous step must dissapear. So I need dynamic output in the callbacks and I need to put my buttons in the intial layout, because otherwise I will get an dependencies error . The callbacks show strange behaviour - some steps work, some dont - even though they are identical. Can someone help me with this? Maybe there is another solution for my problem… I broke it down to the following code:

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


app = dash.Dash()
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div([
    
        html.Div(id='calib_content_step1'),
        html.Div(id='calib_content_step2'),
        html.Div(id='calib_content_step3'),
        html.Div(id='calib_content_step4'),
        html.Div(id='calib_content_step5'),
        html.Div(id='calib_content_step6'),
        html.Button('Submit SN', id='button_sn', n_clicks=0, style={'display': 'none'}),
        html.Button('Submit SN 2', id='button_sn2', n_clicks=0, style={'display': 'none'}),
        html.Button('Submit SN 3', id='button_sn3', n_clicks=0, style={'display': 'none'}),
        html.Button('Submit SN 4', id='button_sn4', n_clicks=0, style={'display': 'none'}),
        html.Button('Submit SN 5', id='button_sn5', n_clicks=0, style={'display': 'none'}),
        html.Button('Submit SN 6', id='button_sn6', n_clicks=0, style={'display': 'none'})
])

@app.callback(Output('calib_content_step1', 'children'),
             [Input('button_sn','n_clicks')])
def render_content(button_sn):
		if button_sn < 1:
			return html.Div("Please enter your SN and press OKAY"), dcc.Input(id='input_box_sn', type='text'), html.Button('Submit SN', id='button_sn')
		else:
			return ''
            
            
@app.callback(Output('calib_content_step2', 'children'),
             [Input('button_sn','n_clicks'), Input('button_sn2','n_clicks')])
def render_content(button_sn, button_sn2):
		if button_sn == 1 and button_sn2 < 1:
			return html.Div("Step 2"),html.Button('Submit SN 2', id='button_sn2')
		else:
			return ''
            
            
@app.callback(Output('calib_content_step3', 'children'),
             [Input('button_sn2','n_clicks'), Input('button_sn3','n_clicks')])
def render_content( button_sn2, button_sn3):
		if button_sn2 == 1 and button_sn3 < 1:
			return html.Div("Step 3"),html.Button('Submit SN 3', id='button_sn3')
		else:
			return ''

@app.callback(Output('calib_content_step4', 'children'),
             [Input('button_sn3','n_clicks'), Input('button_sn4','n_clicks')])
def render_content(button_sn3, button_sn4):
		if button_sn3 == 1 and button_sn4 < 1:
			return html.Div("Step 4"),html.Button('Submit SN 4', id='button_sn4')
		else:
			return ''
            
@app.callback(Output('calib_content_step5', 'children'),
		                 [Input('button_sn4','n_clicks'), Input('button_sn5','n_clicks')])
def render_content( button_sn4, button_sn5):
		
		if button_sn4 == 1 and button_sn5 < 1:
			return html.Div("Step 5"), html.Button('Submit SN 5', id='button_sn5')
		else:
			return ''
            
@app.callback(Output('calib_content_step6', 'children'),
		                 [Input('button_sn5','n_clicks'), Input('button_sn6','n_clicks')])
def render_content(button_sn5, button_sn6):
		
		if button_sn5 == 1 and button_sn6 < 1:
			return html.Div("Step 6"),html.Button('Submit SN 6', id='button_sn6')
		else:
			return ''


if __name__ == '__main__':
     app.run_server(debug = False,host = '0.0.0.0', port=8050)
2

I solved the probem by putting my buttons in a div and make it invisible. That way I don’t have to declare my buttons twice, what caused the problem. For those who are interested:

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


app = dash.Dash()
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div([
    
        html.Div(id='calib_content_step1'),
        html.Div(id='calib_content_step2'),
        html.Div(id='calib_content_step3'),
        html.Div(id='calib_content_step4'),
        html.Div(id='calib_content_step5'),
        html.Div(id='calib_content_step6'),
        html.Div([html.Button('Continue', id='continue_2', n_clicks=0)], id='button_2_div', style={'display': 'none'}),
	html.Div([html.Button('Continue', id='continue_3', n_clicks=0)], id='button_3_div', style={'display': 'none'}),
	html.Div([html.Button('Continue', id='continue_4', n_clicks=0)], id='button_4_div', style={'display': 'none'}),
	html.Div([html.Button('Continue', id='continue_5', n_clicks=0)], id='button_5_div', style={'display': 'none'}),
	html.Div([html.Button('Continue', id='continue_6', n_clicks=0)], id='button_6_div', style={'display': 'none'}),
	html.Div([html.Button('Submit SN', id='button_sn', n_clicks=0)], id='button_sn_div', style={'display': 'none'}),
])

	
@app.callback(
	[Output('button_sn_div','style'), Output('calib_content_step1','children')],
	[Input('button_sn','n_clicks'), Input('continue_2','n_clicks')],
)
def render_step_1(n_clicks_sn, continue_2):
    if n_clicks_sn == 0 and continue_2 == 0:
        return None, html.Div([html.Div("Please enter your SN and press OKAY"), dcc.Input(id='input_box_sn', type='text')])
    else:
        return ({'display': 'none'}), None
	

@app.callback(
	[Output('button_2_div','style'), Output('calib_content_step2','children')],
	[Input('button_sn','n_clicks'), Input('continue_2','n_clicks')],
)
def render_step_1(n_clicks_sn, continue_2):
    if n_clicks_sn == 1 and continue_2 == 0:
        return None, html.Div([("Step 2")])
    else:
        return ({'display': 'none'}), None
	
	
@app.callback(
	[Output('button_3_div','style'), Output('calib_content_step3','children')],
	[Input('continue_2','n_clicks'), Input('continue_3','n_clicks')],
)
def render_step_1(continue_2, continue_3):
    if continue_2 == 1 and continue_3 == 0:
        return None, html.Div([("Step 3")])
    else:
        return ({'display': 'none'}), None

@app.callback(
	[Output('button_4_div','style'), Output('calib_content_step4','children')],
	[Input('continue_3','n_clicks'), Input('continue_4','n_clicks')],
)
def render_step_1(continue_3, continue_4):
    if continue_3 == 1 and continue_4 == 0:
        return None, html.Div([("Step 4")])
    else:
        return {'display': 'none'}, None
	
@app.callback(
	[Output('button_5_div','style'), Output('calib_content_step5','children')],
	[Input('continue_4','n_clicks'), Input('continue_5','n_clicks')],
)
def render_step_1(continue_5, continue_6):
    if continue_5 == 1 and continue_6 == 0:
        return None, html.Div([("Step 5")])
    else:
        return {'display': 'none'}, None
	
@app.callback(
	[Output('button_6_div','style'), Output('calib_content_step6','children')],
	[Input('continue_5','n_clicks'), Input('continue_6','n_clicks')],
)
def render_step_1(continue_5, continue_6):
    if continue_5 == 1:
        return None, html.Div([("Step 6")])
    else:
        return {'display': 'none'}, None


if __name__ == '__main__':
     app.run_server(debug = True,host = '0.0.0.0', port=8050)