Multiple callbacks for an output

Thanks! Did you test it? I added support for @callback after posting the previous answer. I haven’t had the time to play with multipage yet though.

1 Like

No! Good to know! I’ll test and revert.

I tried and I get the Duplicate Callback Output error:
:rescue_worker_helmet:
Duplicate callback outputs
10:29:32 PM
In the callback for output(s):
img_backtest.src
Output 0 (img_backtest.src) is already in use.
Any given output can only have one callback that sets it.
To resolve this situation, try combining these into
one callback function, distinguishing the trigger
by using dash.callback_context if necessary.

I then tried to import “callback” from dash_extensions.enrich => different error:
Cannot read properties of undefined (reading ‘src’)
Though to be clear: despite the error message, the callback using the first declared input (“dashboard_asset”) in the layout works perfectly, the error arises on the callback on the 2nd declared input (“dashboard_asset-test”).

Callbacks definition for clarity:

@callback(
Output(‘img_backtest’, ‘src’),
Input(ThemeSwitchAIO.ids.switch(“theme”), “value”),
Input(‘dashboard_date’, ‘date’),
Input(‘dashboard_asset-test’, ‘value’),
)
def update_backtests_fig_test(toggle, dashboard_date, dashboard_asset):

return im

@callback(
Output(‘img_backtest’, ‘src’),
Input(ThemeSwitchAIO.ids.switch(“theme”), “value”),
Input(‘dashboard_date’, ‘date’),
Input(‘dashboard_asset’, ‘value’),
)
def update_backtests_fig(toggle, dashboard_date, dashboard_asset):

return im

Thank you for this information, is was very helpful.

I have an issue that i don’t know if it matters. When I execute plolty, the console put three times the message: Dash is running on http://127.0.0.1:8050/

Thanks!!

You have to import the ‘callback’ from de DashProxy app, put @app.callback(…) and maybe it will work.

Thank you very much!

best work around solution is using tabs instead of div or wrap up your changeable element with button where the div will be update every time you change between the dynamic buttons.
I may not explain it well. but it removed the need of re-render to the same output twice

Hello,

I am trying to use multiple callback for an output but have encountered an issue when using “MATCH”.
Please see code below. The issue arise when I add the second callback, the one for the “ok-button”. Without that callback I am able to open the modal, however, when the second callback is added i get an error. Please see attached picture.

The issue might be obvious, but since the only difference is to close or open I assume that it should work.
** Edit
I am using dash-extensions=0.0.47rc1

import dash_html_components as html
import dash_bootstrap_components as dbc

from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, MATCH, ALL
from dash import ctx

from dash.exceptions import PreventUpdate




app = DashProxy(prevent_initial_callbacks=True, transforms=[MultiplexerTransform()], external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
    [
        html.Div(
            children=[
                html.Div(
                    children = [
                    dbc.Button(f"{val}", id={"type" : "open", "index": index}),
                    dbc.Modal(
                        [
                            dbc.ModalHeader(dbc.ModalTitle("Header")),
                            dbc.ModalBody(
                                html.Div(
                                    children = [
                                        f"Hej {val}"
                                    ])
                                ),
                            dbc.ModalFooter(
                                [
                                   dbc.Button("Ok", id = {"type" : "ok", "index" : index}),
                                    
                                ],
                                style = {"align-items": "flex-start"})
                        ],
                        id={"type" : "modal", "index": index},
                        is_open=False,
                        scrollable = True,
                        size = "lg"
                    )
                    
                ]
            ) for (index, val) in enumerate(["A", "B", "C"])
        ],
        style={"width" : "1wh", "background-color": "rgb(201, 76, 76)", "display":"flex"}
    ),

        html.Div(id="log")
    ]
)


@app.callback(
    Output({'type' : 'modal', 'index' : MATCH}, "is_open"),
    [Input({'type': 'open', 'index': MATCH}, "n_clicks")])
def left(_):
    if _ is None:
        PreventUpdate
    else:
        return True

@app.callback(
    Output({'type' : 'modal', 'index' : MATCH}, "is_open"),
    [Input({'type': 'ok', 'index': MATCH}, "n_clicks")])
def right(_):
    if _ is None:
        PreventUpdate
    else:
        return False

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