✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Problems triggering callbacks in multi-page app

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 (https://dash.plotly.com/urls). 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

I would really appreciate any suggestions if somebody has some ideas related to my post. Thanks!

Hi!

I ran the code you provided and it worked exactly as it should - the callbacks fired in app2 every time I switched back to that page.

A few months ago I had a similar thing happen and callbacks stopped working like you described.
It was fixed when I upgraded to the latest version of Dash.

I don’t know if that’s helpful, but it might be worth a try.

1 Like

Thank you so much @AnnMarieW!

You were absolutely spot on. I was running an older version of Dash. Once I upgraded to the latest version, the slider outputs worked as expected. Thanks so much again for your help!

I’m so glad it worked for you! Thanks for letting me know :grinning: