Skip to content

[BUG] Multi-output callback not firing on dynamically-added components #798

@alexcjohnson

Description

@alexcjohnson

As reported in https://community.plot.ly/t/multiple-outputs-dont-work-in-multi-page-apps/25107 - the same code written as two separate callbacks works fine, but not as a multi-output.

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

app = dash.Dash(__name__, suppress_callback_exceptions=True)

layout1 = html.Div([
    dcc.Dropdown(id='ca_city_dropdown', options=[], value=None),
    dcc.Dropdown(id='us_city_dropdown', options=[], value=None),
])


# ------------- Single callback with multiple outputs does not work -----------
# @app.callback(
#     [Output('ca_city_dropdown', 'options'),
#      Output('us_city_dropdown', 'options')],
#     [Input('cities_div', 'children')])
# def display_cities(cities):
#     opts = [{'label': i, 'value': i} for i in cities]
#     return [opts[:3], opts[3:]]


# ------------- Separate callbacks work -------------
@app.callback(
    Output('ca_city_dropdown', 'options'),
    [Input('cities_div', 'children')])
def display_ca_cities(cities):
    return [{'label': i, 'value': i} for i in cities[:3]]


@app.callback(
    Output('us_city_dropdown', 'options'),
    [Input('cities_div', 'children')])
def display_us_cities(cities):
    return [{'label': i, 'value': i} for i in cities[3:]]


_cities = [
    "Toronto", "Montreal", "Vancouver", "New York", "Austin", "Los Angeles"
]

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='cities_div', style={'display': 'none'}, children=_cities),
    html.Div(id='page-content'),
])


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/':
        return layout1
    else:
        return '404'

if __name__ == '__main__':
    app.run_server(debug=True)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions