Multipage app callback stops working after dropdown choice

Dash Python
1

Hi,

I have a multipage app that uses a dcc.Dropdown and a daq.ToggleSwitch to control some data manipulation. Initially everything works well but when I make a selection using the dropdown (even choosing the default value), go to anther page and then return to the original page the dropdown callback no longer outputs as expected.

I have included a minimal example below to demonstrate. Initially we can switch between pages 1 and 2 and see both divs on page 1 output as expected. If we then make a selection in the dropdown, go to page 2, come back to page 1, the page-1-div-1 does not contain the output from the update_dropdown function as expected. We can however see from the terminal that the function is still executing, the output is just not making it to the div.

Can you please explain where I am going wrong?

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

server = flask.Flask('app')
app = dash.Dash('app', server=server)
app.config.suppress_callback_exceptions = True

app.layout = html.Div(
    [
        dcc.Location('url', refresh=False),
        html.Div(id='page-content')
    ], style={'width': '100%', 'height': '100%'}
)


def generate_layout_page_1():
    return html.Div([
        dcc.Link('To page 2', href='/2'),
        html.Div(id='page-1-div-1', children='Empty'),
        html.Div(id='page-1-div-2', children='Empty'),
        dcc.Dropdown(
            id='page-1-dropdown',
            options=[{'label': '1', 'value': '1'},
                     {'label': '2', 'value': '2'}],
            value='1',
        ),
        daq.ToggleSwitch(
            id='page-1-toggle',
            label=['a', 'b'],
            value=True
        )
    ]
    )


@app.callback(
    Output('page-1-div-1', 'children'),
    [Input('page-1-dropdown', 'value')]
)
def update_dropdown(_):
    print('DROPDOWN')
    return 'Dropdown fired'


@app.callback(
    Output('page-1-div-2', 'children'),
    [Input('page-1-toggle', 'value')]
)
def update_toggle(_):
    print('TOGGLE')
    return 'Toggle fired'


def generate_layout_page_2():
    return html.Div(dcc.Link('Return to page 1', href='/'))


@app.callback(
    Output('page-content', 'children'),
    [Input('url', 'pathname')]
)
def update_page(path):
    if path == '/2':
        return generate_layout_page_2()
    else:
        return generate_layout_page_1()


if __name__ == '__main__':
    app.run_server()
2

Versions:

  • dash 1.7.0
  • dash_core_components 1.6.0
  • dash_daq 0.2.2
  • dash_html_components 1.0.2
  • flask 1.1.1
3

Have you tried updating to the most recent version of Dash?

1 Like
4

Oops, I hadn’t realised how out-of-date I was. Yes this works as expected with dash 1.11.0. Thanks!

2 Likes