Callback of button within tab-content

Dash Python
1

Hey community,

i´ve a small project and got stuck, search function and experiments doesn´t get me a single step further.

My question:
Is it even possible to have an callback for a button within tab-content like described here?
Tabs with Callback

No matter what i try, it raises an error, because the button doesn’t ‘exist’ before ‘tab’-callback.

Thank you
Cheers
PQD

2

Have you tried supressing callback exceptions for components that are not in the initial layout?

app = dash.Dash(__name__, suppress_callback_exceptions=True)
3

Hey,
yes, already tried.
Actually it works, but only with errors “ID not found in layout” (Output/Input)

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

eSS = '/static/bootstrap.min.css'

tab1_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 1!", className="card-text"),
            dbc.Button("Click here", color="success", id = 'B1'),
            html.Div(id='out')
        ]
    ),
    className="mt-3",
)
tab2_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 2!", className="card-text"),
            dbc.Button("Don't click here", color="danger"),
        ]
    ),
    className="mt-3",
)

app = dash.Dash(__name__, external_stylesheets=[eSS], suppress_callback_exceptions=True)
app.layout= html.Div(
    [
        dbc.Tabs(
            [
                dbc.Tab(label="Tab 1", tab_id="tab-1"),
                dbc.Tab(label="Tab 2", tab_id="tab-2"),
            ],
            id="tabs",
            active_tab="tab-1",
        ),
        html.Div(id="content"),
    ]
)

@app.callback(Output("content", "children"), [Input("tabs", "active_tab")])
def switch_tab(at):
    if at == "tab-1":
        return tab1_content
    elif at == "tab-2":
        return tab2_content
    return html.P("This shouldn't ever be displayed...")

@app.callback(Output("out", "children"), [Input("B1", "n_clicks")])
def button(n):
    if n:
        return html.P("This shouldn't ever be displayed...")

if __name__ == "__main__":
    app.run_server(debug=True, port=8050)
4

Found my mistake, had to initialize the app at first…thanks for your help.

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

eSS = '/static/bootstrap.min.css'
app = dash.Dash(__name__, external_stylesheets=[eSS], suppress_callback_exceptions=True)


tab1_content = dbc.Card(
    dbc.CardBody(
        [
            html.P("This is tab 1!", className="card-text"),
            dbc.Button("Click here", color="success", id = 'B1'),
            html.Div(id='out')
        ]
    ),
    className="mt-3",
)...