Id can not be found by callback function

Dash Python
1

Hello there, I am using a side navigation bar to display different plots when clicked upon the links. Everything was working fine excepet when I wanted to make the plot/graphs interactive. in my render_page_content function I return the content of a page. And for one of this page there is a graph that I want to make interactive. In order to do that, I did give the drop down menu a id and the graph a id and then had a callback function outside the render_page_content function but the callback function just can not find the id. I am thinking maybe because I have the callback function outside the render_page_content function , thats why the callback function can not find the id. but I tried putting the callback function inside render_page_content function before the return but that also didn’t work. Here is my code:

app.layout = html.Div([dcc.Location(id="url"), sidebar, content])

@app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname")],
)
def render_page_content(pathname):
    if pathname == "/":
        return [
            html.H1('Welcome to MailWatch Statistical Reports', style={'textAlign': 'center'}),
        ]
    elif pathname == "/page-1":
        return [html.Div([
            html.H1('Top 10 Mail Relays', style={'textAlign': 'center'}),
            dcc.Graph(
                id='bargraph',
                figure=go.Figure(data=[go.Table(
    header=dict(values=list(df1.columns),
                fill_color='paleturquoise',
                align='left'),
    cells=dict(values=[df1.clientip, df1['count'], df1.total_viruses, df1.total_spam,df1['size']],
               fill_color='lavender',
               align='left'))
])
            )
        ])
        ]
    elif pathname == "/page-2":
        div_item=html.Div([html.H1('Top 10 Sender domains', style={'textAlign': 'center'}),
                dcc.Dropdown(
                        options=[{'label': name, 'value': name} for name in df2['name'].unique()],
                        value=df2['name'].unique()[0],  # Set a default value if needed
                    id='drop_down'
                )
            ,
            dcc.Graph(
                id='bargraph2'
            )])
        return [ 
            div_item
            ]

            

    
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognized..."),
        ]
    )


@app.callback(
        Output('bargraph2','figure'),
        [Input('drop_down','value')]
        )
def update_graph(drop_down_name):
            dff=df2[df2['name']==drop_down_name]
            print(dff)
            figure=px.bar(dff, barmode='group', x='name',
                              y='count')
            return figure
        


if __name__ == '__main__':
    app.run_server(debug=True, port=3000)

What can I do to solve this problem?

2

Hi @anoman welcome to the forums. Try setting suppress_callback_exceptions=True

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