How to get text in dash using dialog box? - dialog

Question

I want to ask name of plot by using dialog box in dash like promp function in javascript but when I use {html.Script("prompt('text');", type='text/javascript') I have nothing in return.
I don't want to use text input or text area.
Thank you for your help.

Answer 1

The Dash documentation says the following on html.Script:
CAUTION: is included for completeness, but you cannot execute JavaScript code by providing it to a element. Use a clientside callback for this purpose instead.
https://dash.plotly.com/dash-html-components/script
As the documentation says here one option would be to use a clientside callback instead.
Minimal example to show the idea:
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(id="content"),
html.Button(id="button", children="Show name of plot prompt"),
]
)
app.clientside_callback(
"""
function(n_clicks) {
if (n_clicks) {
nameOfPlot = prompt('name of plot')
return nameOfPlot
}
return "Name of plot placeholder"
}
""",
Output("content", "children"),
Input("button", "n_clicks"),
)
The Button click is the input for this callback. If nothing is clicked I return a placeholder text which sets the children property of a div with id content.
If the button has been clicked we can call prompt and do something with it.
With this approach you need an input and an output for the callback to work. You could also put the Javascript code in a .js file in an assets in your root application directory. For more info on client side callbacks see the documentation here.
Another approach would be to have a .js file in your assets folder and to put your prompt code there. You'd probably also want to set up some event listeners to wait for the page to load and/or to listen for button click events or other events that you could use to trigger the prompt at the right moment.