Problem with callbacks in different tabs

Dash Python
5

I would put everything into the mother-Div of each of your dcc.Tab.

As example, I structure my stuff like this

tab1_layout=[
   html.Div(id='graph-1'),
   dcc.Dropdown(id,options,value)
]

tab2_layout=[
   html.Div(id='graph-2'),
   dcc.Dropdown(id,options,value)
]

app.layout = html.Div(
   children=[
      dcc.Tabs(
         id='tabs', value=1, children=[
            dcc.Tab(label='Tab1', value=1),
            dcc.Tab(label='Tab2', value=2),
            ]
      ),
   html.Div(id='tab-output')
   ]
)

@app.callback(
	Output('tab-output', 'children'),
	[Input('tabs', 'value')])
def show_content(value):
	if value == 1:
		return tab1_layout
	elif value == 2:
		return tab2_layout
	else:
		html.Div()

So now all your tab layout is a list of dash-html and dash-core components, which in your callback are all placed in the same ‘mother-Div’.

2 Likes