Callback doesn't work

Dash Python
1 
import dash
import dash_html_components as html
import dash_core_components as dcc

from dash.dependencies import Input, Output

app = dash.Dash(__name__)

tabs_styles = {
    'height': '44px'
}
tab_style = {
    'borderBottom': '1px solid #d6d6d6',
    'padding': '6px',
    'fontWeight': 'bold'
}

tab_selected_style = {
    'borderTop': '1px solid #d6d6d6',
    'borderBottom': '1px solid #d6d6d6',
    'backgroundColor': '#119DFF',
    'color': 'white',
    'padding': '6px'
}

app.layout = html.Div([
    html.H1(children='asdf'),
    
    dcc.Tabs(id="tabs-styled-with-inline", value='tab-1', children=[
        dcc.Tab(label='Tab 1', value='tab-1', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Tab 2', value='tab-2', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Tab 3', value='tab-3', style=tab_style, selected_style=tab_selected_style),
        dcc.Tab(label='Tab 4', value='tab-4', style=tab_style, selected_style=tab_selected_style),
    ], style=tabs_styles),
    html.Div(id='tabs-content-inline'),


])

@app.callback(Output('tabs-content-inline', 'children'),
              [Input('tabs-styled-with-inline', 'value')])
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1'),

            html.Label('Input and Button'),
            html.Div(dcc.Input(id='input-box', type='text')),
            html.Button('Submit', id='button'),
            html.Div(id='container-button-basic',
                     children='Enter a value and press submit'
                     ),
            html.Br(),
            html.Br(),

            html.Label('Dropdown'),
            dcc.Dropdown(
                options=[
                    {'label': 'New York City', 'value': 'NYC'},
                    {'label': u'Montréal', 'value': 'MTL'},
                    {'label': 'San Francisco', 'value': 'SF'}
                ],
                style={'width': 200},
                value='MTL'),

            html.Label('Slider'),
            dcc.RangeSlider(
                marks={i: 'Label {}'.format(i) for i in range(-5, 7)},
                min=-5,
                max=6,
                value=[-3, 4]
            ),

            html.Label('Confirm Button'),
            dcc.ConfirmDialogProvider(
                children=html.Button(
                    'Click Me',
                ),
                id='danger-danger-provider',
                message='Danger danger! Are you sure you want to continue?'
            ),
            html.Div(id='output-provider'),
        ])

    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2'),

        ])

    elif tab == 'tab-3':
        return html.Div([
            html.H3('Tab content 3'),

        ])

    elif tab == 'tab-4':
        return html.Div([
            html.H3('Tab content 4'),

        ])

    @app.callback(
        dash.dependencies.Output('container-button-basic', 'children'),
        [dash.dependencies.Input('button', 'n_clicks')],
        [dash.dependencies.State('input-box', 'value')])
    def update_output(n_clicks, value):
        return 'The input value was "{}" and the button has been clicked {} times'.format(
            value,
            n_clicks
        )

    @app.callback(Output('output-provider', 'children'),
                  [Input('danger-danger-provider', 'submit_n_clicks')])
    def update_output(submit_n_clicks):
        if not submit_n_clicks:
            return ''
        return """
        It was dangerous but we did it!
        Submitted {} times
        """.format(submit_n_clicks)


if __name__ == "__main__":
    app.run_server(debug=True)

This is my code.
Tabs work well.
But In tab 1 I put ‘Input & Button’, ‘Confirm Button’ and this two buttons are supposed to show specific message, but it doesn’t work.
I wrote @app.callback below.
What is wrong with my code?
Please help me :cry::cry::cry::cry:

2

I think you can’t write @app.callback inside another @app.callback like that, it will be called only once during loading.
write that inner @app.callback outside the function

1 Like
3

Thank you!
But when I try it, Pycharm shows some error message and doesn’t finish successfully

The message is

Traceback (most recent call last):
File “C:\Users\JAR\PycharmProjects\untitled2\app2.py”, line 137, in
[dash.dependencies.State(‘input-box’, ‘value’)])
File “C:\Users\JAR\AppData\Local\Programs\Python\Python37\lib\site-packages\dash\dash.py”, line 1014, in callback
self._validate_callback(output, inputs, state)
File “C:\Users\JAR\AppData\Local\Programs\Python\Python37\lib\site-packages\dash\dash.py”, line 743, in _validate_callback
).replace(’ ', ‘’))
dash.exceptions.NonExistentIdException:
Attempting to assign a callback to the
component with the id “container-button-basic” but no
components with id “container-button-basic” exist in the
app’s layout.

Here is a list of IDs in layout:
[‘alignment-body’, ‘example-graph’, ‘alignment-control-tabs’, ‘tabs-styled-with-inline’, ‘tabs-content-inline’]

If you are assigning callbacks to components
that are generated by other callbacks
(and therefore not in the initial layout), then
you can suppress this exception by setting
'app.config[‘suppress_callback_exceptions’]=True`.

How can I solve this problem?? :cry:

1 Like
4

Looks like you are defining callbacks referencing components before they are defined. Set the following variable to suppress these errors:

app.config.suppress_callback_exceptions = True

1 Like
5

Problem solved! Thank you so much XD

1 Like