Trigger a dropdown from a button on different page

Dash Python
1

Is there a way to have a button on one page, trigger information for the next page without using dcc.Store?

As an example I would like the ‘prev-graph-button’ that is on the home page to redirect to the prev-graph page AND populate the ‘prev-report-drop’ dropdown. However when I tried to do the callback on home.py it told me that ‘prev-report-drop’ was not an option. I also tried moving the callback to my app.py but it didn’t work there either.

home.py

layout =  html.Div([       
       dbc.Row([
            html.Center([
                dbc.Button(
                    'See Graphs for Previous Meetings',
                    id='prev-graph-button',
                    n_clicks=0,
                    color='secondary',
                    outline=True
                )
            ])
        ],
        style={'margin-top': '30px'}),

        dcc.Location(id='graph-redirect', pathname='/'),
        dcc.Location(id='prev-graph-redirect', pathname='/')
)]

@callback(
    Output('prev-graph-redirect', 'pathname'),
    Output('prev-report-drop', 'options'),
    Input('prev-graph-button', 'n_clicks')
)
def prev_graph_page(n1):
    if n1:
        report_df = pod.get_prev_reports()
        return '/prev-graph', report_df.ReportName[-2:]

prev-graph.py

layout = html.Div([
                html.Center([
                    html.H4('Select a Previous Report'),
                    dcc.Dropdown(
                        id='prev-report-drop',
                        options=[],
                        placeholder='Report',
                        style={'width': '160px', 'text-align': 'left', 'margin-top': '20px'}
                    )
                ],
                style={'margin-top': '20px'})
)]

My main reason for needing to do this is I originally would call the function get_prev_reports() on page load and had report_df.ReportName[-2:] directly in options. But when deploying on a Docker container, the options don’t update with the app. So I need a trigger to call the function instead of having it on page load one time. So if anyone has other ideas than my initial question, I’m open to suggestions.

2

Hello @bpolasek,

I dont know if there is a way without a dcc.Store, but you could use a trick and allow for persistence on the dropdown value that you want, then it will reload when the page is navigated to.

3

I’m not super familiar with persistence. In this instance would I just need:

layout = html.Div([
                html.Center([
                    html.H4('Select a Previous Report'),
                    dcc.Dropdown(
                        id='prev-report-drop',
                        options=pod.get_prev_reports().ReportName[-2:],
                        persistence_type='memory',
                        placeholder='Report',
                        style={'width': '160px', 'text-align': 'left', 'margin-top': '20px'}
                    )
                ],
                style={'margin-top': '20px'})
)]

?

4

Give it a shot, memory will clear upon refreshing, it might be better to do session.

But up to you and your flow. :slight_smile:

5

So the issue initially was that it wouldn’t refresh once the Docker container was running. If I restarted the container then it would refresh. So I almost need/want it to refresh when the page refreshes. I’ll try it and see how it works.

6

That is a symptom of debug=True, when in production, that shouldnt be the case due to hot_reloading be defaulted to off.

7

I usually turn that off when deploying. I’ll mess around and see. Maybe I didn’t that time.

1 Like