Hi Everybody,
I’m having issues with a multi-page app I’m building. Specifically, on one of the pages I’ve got multiple Slider bars with persistince_type=‘session’ and everything appears to be working fine. However, when I switch pages and then come back to the original page with the slider bars, some of the slider bar callbacks don’t appear to be firing. I’m wondering, how can I force all of the callbacks associated with these slider bars to trigger when coming back to this page?
Here I’m providing some bare-bones code from the multipage-app tutorial (URL Routing and Multiple Apps | Dash for Python Documentation | Plotly). The Slider bars were added into app2.py.
Here is the file structure:
- app.py
- index.py
- apps/app1.py
- apps/app2.py
app.py
import dash
app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server
index.py
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
from apps import app1, app2
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
])
@app.callback(Output('page-content', 'children'),
[Input('url', 'pathname')])
def display_page(pathname):
if pathname == '/apps/app1':
return app1.layout
elif pathname == '/apps/app2':
return app2.layout
else:
return '404'
if __name__ == '__main__':
app.run_server(debug=True)
apps/app1.py
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
layout = html.Div([
html.H3('App 1'),
dcc.Dropdown(
id='app-1-dropdown',
options=[
{'label': 'App 1 - {}'.format(i), 'value': i} for i in [
'NYC', 'MTL', 'LA'
]
]
),
html.Div(id='app-1-display-value'),
dcc.Link('Go to App 2', href='/apps/app2')
])
@app.callback(
Output('app-1-display-value', 'children'),
[Input('app-1-dropdown', 'value')])
def display_value(value):
return 'You have selected "{}"'.format(value)
apps/app2.py
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from app import app
layout = html.Div([
html.H3('App 2'),
dcc.Slider(
id='new-slider',
min=0,
max=100,
step=1,
marks={i: str(i) for i in range(0, 101, 5)},
value=50,
persistence=True,
persistence_type='session'
),
html.Div(id='new-slider-output'),
dcc.Slider(
id='new-slider2',
min=20,
max=40,
step=1,
marks={i: str(i) for i in range(20, 41, 1)},
value=25,
persistence=True,
persistence_type='session'
),
html.Div(id='new-slider2-output'),
dcc.Link('Go to App 1', href='/apps/app1')
])
@app.callback(
Output('new-slider-output', 'children'),
[Input('new-slider', 'value')])
def display_value(value):
return 'Slider value: "{}"'.format(value)
@app.callback(
Output('new-slider2-output', 'children'),
[Input('new-slider2', 'value')])
def display_value(value):
return 'Slider2 value: "{}"'.format(value)
I did find one solution to this problem, however I really don’t like it. Specifically, using dcc.Interval set to run every second and then using that as an input to all my slider bars. However, when you do this, the page looks like it’s always refreshing, which I don’t like. Does anybody have a better solution to this problem?
Thanks in advance for any help!
Ben
