How to insert javascript to dash

Dash Python
1

I am new to use js and I insert a line of js in the html.Script in app.layout, but it don’t work

app.layout = html.Div([
    html.Div(id = 'uuu') ,
    html.Script('document.getElementById("uuu").innerHTML = "Hello"', type="text/JavaScript")   
    ])

then, I save

document.getElementById(“uuu”).innerHTML = “Hello”

to github and change the app.scripts.append_script by url

app.scripts.append_script({
“external_url”: my_js_url
})

but it don’t work, too…

the javascript can work well on console in google chrome, so how do I make it work in dash …?

1 Like
2

@jimmybow - did you end up figuring this out? append_script should work although the document.getElementById might be referring to an ID that hasn’t yet rendered on the page itself.

I haven’t experimented with using html.Script itself either.

3

from my try, html.Script() is not available…, I don’t know the reason… ,
append_script is available , but it can’t change the content in app.layout (from react.js)…
the way i only can do is build a new dcc to run javascript …

1 Like
4

Hi chriddyp,

have you try out the html.Script?

Zh

5

Yeah I’m having a problem with a script that relies on an Id that has not been rendered yet. Using the html.Script tag (rendered at a later date) doesn’t seem to work, does the Script tag even do anything atm?

6

I just create a component visdcc.Run_js to solve this problem, it run js in react.js env and using setProps method to callback the props.:slightly_smiling_face:

7

Same issue I am facing. There are some external and local js files which I wish to execute only when layout is done. How to achieve that?