Plotly-Dash: How to determine trigger input in client-side callback

user_2716049 0
Viewed 1585

Dash's documentation describes how to determine which input triggered a callback in the case of server-side callbacks: Advanced Callbacks.

Is there a way to determine which input triggered a client-side callback?

It looks like this functionality was added in version 1.13.0 (#1240), but my browser console indicates that dash_clientside.callback_context is undefined. I am running Dash version 1.19.0.

Edit: The error I was experiencing was due to an issue with my Dash installation. I had installed via conda install dash, and it appears the Dash packages on the Anaconda main channel have issues. Installing from conda forge fixed the problem: conda install -c conda-forge dash. See accepted answer for a working example.

plotly-dash plotly python javascript
1 Answers

Yes, that is possible. As you note yourself, the information is available in the dash_clientside.callback_context variable. Here is a small example,

import dash_html_components as html
from dash import Dash
from dash.dependencies import Output, Input

# Create app.
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
    html.Button("Button 1", id="btn1"), html.Button("Button 2", id="btn2"), html.Div(id="log")
])
app.clientside_callback(
    """
    function(x, y){
        const triggered = dash_clientside.callback_context.triggered.map(t => t.prop_id);
        return "Hello from [" + triggered + "]";
    }
    """, Output("log", "children"), [Input("btn1", "n_clicks"), Input("btn2", "n_clicks")])

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

tested with dash==1.18.1 on python 3.8 on Linux Mint 20.

user_24288870
Related