How to pass values between pages in dash

@ajeeteshmishra wrote:

Hi, I am trying to create a dash where I have different pages. I am selecting one value on page 1. Then a message gets displayed- You have selected Value. Now I want that value to gets passed to Page 2, so that it says- You selected Value (Value on Page 1 using dropdown). But I am not able to do that. On running the dash, till Page 1, it works fine, but then on coming to Page 2, it shows updating.

Here is the code-

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

print(dcc.__version__)

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])


index_page = html.Div([
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
])


page_1_layout = html.Div([
    html.H1('Page 1'),
    dcc.Dropdown(
        id='page-1-dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='page-1-content'),
    html.Br(),
    dcc.Link('Go to Page 2', href='/page-2'),
    html.Br(),
    dcc.Link('Go back to home', href='/'),
])

@app.callback(dash.dependencies.Output('page-1-content', 'children'),
              [dash.dependencies.Input('page-1-dropdown', 'value')])
def page_1_dropdown(value):
    return 'You have selected "{}"'.format(value)



page_2_layout = html.Div([
    html.H1('Page 2'),
    html.Div(id='page-2-content'),
    html.Br(),
    dcc.Link('Go to Page 1', href='/page-1'),
    html.Br(),
    dcc.Link('Go back to home', href='/')
])

@app.callback(Output('page-2-content', 'children'),
              [Input('page-1-dropdown', 'value')])
def page_2(value):
    return 'You selected "{}"'.format(value)


# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    else:
        return index_page


if __name__ == '__main__':
    app.run_server(debug=False,port=1244,host = '0.0.0.0')

I want to know how to go about this. Is there some way to store the value and make it accessible to page 2 because declaring the value as global in Page 1 is not helping. Please help.

Posts: 3

Participants: 3

Read full topic