Dash Plotly Share Callback Input in another page with dcc.Store

Hi guys,

i have a 2 pages app, on the first page (app.py), i use dcc.Store to store a value in the session cache, and then trying to load this data in the 2nd page (app2.py), and show it as html.H1.

Here is my code in page one:

dcc.Store(id='session', storage_type='session'), 

then my callback on this page is:

@app.callback(Output('session', 'data'),
              [Input('q1', 'value')])
def q1_value(q1):
     return {'answer1value': q1}

while “q1” is a value from my radioitem.

Then on my 2nd page (app2.py), i call the data out with this:

@app.callback(Output('results', 'children'),
              [Input('session', 'data')]
              )
def result(data):
    math = data['answer1value']
    return 'your answer is "{}"'.format(math)

results is the id of my “html.Div(html.H1(id=“results”))”

But when i run this app, nothing is shown up in this H1. I have spent many hours to fix this but fail, would you one please help ?

Hi,

So, I’m not an expert on multiple pages app, but I suppose you are displaying your pages like in this example https://dash.plotly.com/urls ?

If you do, I think your problem is that you only have on page loaded at a time, so once you have loaded the second page, your first doesn’t exist anymore, so to speak, and you can’t access any element in it.

A solution would be to put the store in your main layout, like this:

app.layout = html.Div([
    # represents the URL bar, doesn't render anything
    dcc.Location(id='url', refresh=False),

    dcc.Link('Navigate to "/"', href='/'),
    html.Br(),
    dcc.Link('Navigate to "/page-2"', href='/page-2'),

    dcc.Store(id='session', storage_type='session')
    # content will be rendered in this element
    html.Div(id='page-content')
])

It should now be accessible by the two pages.
Hope this was helpful!

Thank you @ Lheira, thank you a lot for dropping by! i appreciate your answer.

i followed your instruction, and put the

` dcc.Store(id='session', storage_type='session')`

into the index.py of my app, but i still can 't call it from the other page.

Unless you changed your code since putting it on github, you didn’t put the store at the right place. Here is where it should be:

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Store(id='session', storage_type='session'),
    # load the specific page
    navbar,
    html.Div(id='page-content')
])

It seems to work on my computer :slight_smile:

1 Like

Awesome! it works like charms! Thank you @Lheira!