Attempting to connect a callback Input item but no component with that ID exists

This sounds great and I got some template running for porting my multi-page app to this format!

However, I have two callbacks in one of my pages and something weird happens with it.
My page renders totally fine, but I get these errors:

Attempting to connect a callback Input item to component:
  "variables2"
but no components with that id exist in the layout.

If you are assigning callbacks to components that are
generated by other callbacks (and therefore not in the
initial layout), you can suppress this exception by setting
`suppress_callback_exceptions=True`.
This ID was used in the callback(s) for Output(s):
  plot2.figure

My code for this page is, where i left the beginning of the code out where i read in the data etc.

first_card = dbc.Card(
    dbc.CardBody(
        [
                    html.H2("Recycled Material", className="card-title"),    
                    dcc.Graph(id='plot'),
                    dcc.Dropdown(
                            id='variables',
                                options=[{'label': i, 'value': i} for i in figs],
                                value=figs[0]
                            ),     
            
        ]
    )
)


second_card = dbc.Card(
    dbc.CardBody(
                [
                    html.H2("Virgin Material", className="card-title"),
                    dcc.Graph(id='plot2'),
                    dcc.Dropdown(
                            id='variables2',
                                options=[{'label': i, 'value': i} for i in figs],
                                value=figs2[0]
                            ),     

            
        ]

    )
)

cards = dbc.Row([dbc.Col(first_card, width=6), dbc.Col(second_card, width=6)],style={"margin-bottom": "15px", "margin-left":"15px", "margin-top":"15px", "margin-right":"15px"})



body = html.Div(
    [
       cards,
       ],


# className="mt-4",
style={'height':'100vh'},
)

@callback(
    Output('plot', 'figure'),
    [Input('variables', 'value')])
def update_graph(fig_name):
    if fig_name in data.columns:
        figure1 = px.line(data, x="Timestamp", y=fig_name)
        return figure1


@callback(
    Output('plot2', 'figure'),
    [Input('variables2', 'value')])
def update_graph2(fig_name):
    if fig_name in data2.columns:
        figure2 = px.line(data2, x="Timestamp", y=fig_name)
        return figure2


def Homepage_analytics():
    layout = html.Div([
    body
    ])
    return layout



def layout():
	return Homepage_analytics()

Should i just ignore that warning? Because i never got that warning before. The page renders fine btw everything works i only get that callback.

Hey Dasher @stefanbloemheuvel ,
Welcome to the Plotly Dash community.

I was thinking more about this error you’re getting. When I ran your code on a stand-alone one page app, I realized you would need two things:

  1. you need to add “app” right before the layout. like this:
def Homepage_analytics():
    app.layout = html.Div([
    body
    ])
    return layout
  1. Also, the layout needs to be executed by calling the function" layout().
def layout():
	return Homepage_analytics()

layout()

That said, in a multi-page app, this is not necessary if you’re calling your layout function in the main app page, especially if you have a recent version of Dash installed. I’ll message you to learn more about your code right now.

1 Like