CODEWITHSUNDEEP
pythonplotly-dash
MisterButter
MisterButter

Reputation: 797

Dash, how to callback depending on which button is being clicked?

I have a function that dynamically creates a set of buttons:

def generate_team_button(team_shortName):
    return dbc.Button(
                str(team_shortName),
                className="btn btn-primary",
                id=str(team_shortName),
                style={
                "margin-right": "10px",
                "margin-bottom": '10px',
                },
                n_clicks=0,

            )

These buttons are displayed by looping through a set of items

import dash
import dash_core_components as dcc
import dash_html_components as html

import dash_bootstrap_components as dbc

from dash.dependencies import Input
from dash.dependencies import Output
from dash.dependencies import State

import pandas as pd

data = {'teams': ['team1', 'team2', 'team3', 'team4']}
df_teams = pd.DataFrame(data)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [

        dbc.Row([
                dbc.Col(
                    children=[generate_team_button(i) for i in df_teams['teams']]
                ), 

        ]),

        dbc.Row([
                dbc.Col(
                    id='section',
                    #WANT TO UPDATE THIS SECTION BASED ON WHICH BUTTON IS BEEING CLICKED


                ), 

        ]),
    ]
),

What I want to do is to update id=section based on which button is being pressed. To do that I need a @app.callback like below. But what I get is a tuple with how many times each button has been pressed. 

@app.callback(
    [
        Output('league-table', 'value'),
    ],
    [
        Input(str(i), 'n_clicks') for i in df_teams['teams']
    ] 

)

def update_league_table(*args):
    print(args)
    return f'{args}'

How can I update a section based on which button has been clicked?

Upvotes: 2

Views: 10206

Answers (1)

emher
emher

Reputation: 6014

This information is available via the callback_context object. Here is a small example,

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

n_buttons = 5
# Create example app.
app = dash.Dash(prevent_initial_callbacks=True)
app.layout = html.Div([html.Button("Button {}".format(i), id=str(i)) for i in range(n_buttons)] + [html.Div(id="log")])


@app.callback(Output("log", "children"), [Input(str(i), "n_clicks") for i in range(n_buttons)])
def func(*args):
    trigger = callback_context.triggered[0] 
    return "You clicked button {}".format(trigger["prop_id"].split(".")[0])


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

For additional details, see the documentation on advanced callbacks.

Upvotes: 5

Related Questions