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

Dash Python
1

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 ?

2

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!

3

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.

4

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
5

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

6

when I want to get the dcc.store data from page1 to another page.

on anoother page, I can not use dcc.store as input…

I got this error

image
image1178×436 34 KB

this is the part of my page1

image
image996×650 45.1 KB

and this is the part of another page.

image
image1082×598 44.4 KB

7

hi @Y.J
Here’s a good example of how to use dcc.Store in a multipage app, written by Ann Marie.

8

self answer !

at first, thanks to reply about my problem!! you guys are so smart! and kind !!

by the way, my problem that I shared was solved.

for another people who can face with the same problem I met, I write this.

my solution was to put “the same dcc.store” in the another page layout where I want to get the value.

I thought I didn’t need to put the dcc on the page layout that received data.

ps. I don’t use "dash_lab "

1 Like