Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Using div click to trigger callback

Is it possible to use html.A click to trigger a callback?

Yes, you can target the element’s n_clicks property using an Input in a callback – every Dash component has this property:

@app.callback(Output('target', 'children'),[Input('link', 'n_clicks')])

Alternatively, you can also target a click Event produced by your html.A element:

@app.callback(Output('target', 'children'), [], [], [Event('link', 'click')])

1 Like

Neat thank you. Are there any documentation on Event? Is it possible to know where the Event came from? I mean if I have multiple Events triggering the same callback.

I want to use html.A instead of dcc.Input, but:

dash.exceptions.IncorrectTypeException: The input argument `<dash.dependencies.Event instance at 0x000000001B202388>` is not of type `dash.Input`.

It seems that your trick doesn’t work?

Note the two empty lists that come before the list with an Event in my snippet. The order of arguments in the callback function is Output, [Input], [State], [Event]. If you don’t have any States or Inputs, you still need to include empty lists so that they align correctly.

There’s only one type of Event currently, the click Event. I don’t think Events are documented much, if at all. Unfortunately there’s no way to tell which component was clicked to trigger the click event – it’s a bit of a limitation currently. The same problem exists with the n_clicks approach, because without knowing the previous value of the different n_clicks associated with a callback, you don’t know which one was clicked.

There is however a pull request open that will hopefully be merged soon that introduces an n_clicks_previous property of html and dcc components, which will solve this problem.

1 Like

I see so you can’t really use it too much atm. I guess a workaround would be a state div for each html.A to keep track if the link is clicked, but then again; once the link is clicked you can’t reset its state.

Two different callbacks can’t output to the same Output, right?

That’s right. Not the same property of a component, no.

+1 to the pull request, I’ve been hitting my head against the wall trying to get keep track of which button was clicked so I can get multiple buttons targeting the same output. Please merge soon!