Dash doesn't "see" Local JS update of dcc component?

Dash Python
1

Hi,

I’m building a dash app and have a custom-js file in the assets folder. I use javascript to update a dash component (html.Div, id=‘name’) using:

document.getElementById("name").innerHTML=e.data;

Which seems to work perfectly on the app. The “name” div renders the data that I need. However, Dash doesn’t seem to “see” this change in the div properties.

Here is an example:

app.layout =
html.Div([
          html.Div(id='name', children='test'),
          dcc.Button(id='btn',n_clicks=0),
          dcc.Graph(id=''test_chart")
])




@app.callback(
    Output('test_chart', 'chart'),
    [Input('btn', 'n_clicks')],
    [State('name','children')]
    )
def display_hover_data(clicks,hover_data):
    print(hover_data,clicks)

    return clicks

When I check the console what I would like to see is (“banana”, 1) and maybe (“apple”,2), etc. But the console always shows (“test”,2) then (“test”,3) and so on and so forth.

Could anyone help me understand why Dash is not “seeing” the changes in the value of the children properties of the “name” div?

Thanks!

1 Like