Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Transfer values on multiple page

Hello,

I would to update inputs on multiple pages starting from the main page. I explain my problem :
I have 1 main page with multiple inputs and a list of strategies (chosen by the user). When I click on a button it open 1 page for each strategy selected and the common inputs must be the same than the main page.

Here is my code :

list_strategies = [strat1, strat2, start3]
list_end = [20, 25, 30]

First_page = html.Div([
    html.Div([dcc.Dropdown(id='strategy', options=[{'label': i, 'value': i} for i in list_strategies], multi=True)])
    html.Div([dcc.Input(id='value_start', type='text', value=10)]),
     html.Button('Update datas', id='button_transfer'),
    html.Button('Open page', id='button'),
    html.Div(id='hidden-div', style={'display': 'none'})
])

MyLayout = []
for i in range(len(list_strategies)) : 
    MyLayouti = html.Div([
        html.Div([dcc.Dropdown(id='strategy'+str(i), options=[{'label': i, 'value': i} for i in list_strategies], value=list_strategies[i])])
        html.Div([dcc.Input(id='value_start'+str(i), type='text', value=10)]),
        html.Div([dcc.Input(id='value_end'+str(i), type='text', value=list_end[i])]),
        html.Button('Create Graph', id='button'+str(i)),
        dcc.Graph(id='graph'+str(i), config={'editable': True, 'modeBarButtonsToRemove': ['sendDataToCloud', 'hoverClosestCartesian', 'hoverCompareCartesian']}),
    ])
    MyLayout.append(MyLayouti)

And the layout printed on each page is chosen with the following code :

# start a Dash Application
app = dash.Dash()
app.config.suppress_callback_exceptions = True

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

# Update the index
@app.callback(dash.dependencies.Output('page-content', 'children'),[dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    for i in range(len(list_strategies)) : 
        if pathname == '/page-'+str(list_strategies[i]) : return MyLayout[i]
    if pathname == '/' : return First_page

list_event = [Event('button', 'click')]
list_state = [State('strategy', 'value')]
@app.callback(Output('hidden-div', 'children'),events=list_event, state = list_state)
def create_callback_share(list_strategies_used):
    for _strat in list_strategies_used :
        time.sleep(1)
        webbrowser.open('http://localhost:9992/page-'+_strat)

Now, to transfer the starting date chosen by the user, I have created a callback, triggered by the button “Update datas”. I click on that button then I click on “Open Page” to open the different webpage. My callback is the following :

for i in range(len(list_strategies)) : 
    @app.callback(Output('value_start'+str(i), 'value'),events=[Event('button_transfer', 'click')], state = [State('value_start', 'value')])
    def create_callback_passarg(selected_element):
         test_variable = selected_element
         return "{}".format(selected_element)

The problem is that callback does not work through multiple page. I can use it to modify input on the same page (for example I can use value_start to modify another variable on the first page) but the update does not work for the other page.

It is impossible to use callback through pages ?
Does another exists to update such inputs ?

Thank you!