Hello, this my first topic on the wonderful DASH lib
Issue:
Run dash on loaded html page/file while using dash for callback only on the component id’s that belong to the html file/page
I am using Figma to design my webpage , and convert the Figma to html page
There is option to take the html and convert it to dash html format, Let me be able to use dash to run a callback on my html page.
Some small example:
I build with my Figma the next page:
<h1>Header</h1>
<button id="alert-button" ;type="button">Click Me!</button>
and i want to run it on the dash app , while click on the button is trigger a callback.
I try to using the next code, but it is failed:
app = dash.Dash('')
app.scripts.config.serve_locally = True
app.layout = html.Div([
dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''
<h1>Header</h1>
<button id="alert-button" ;type="button">Click Me!</button>
'''),
])
@app.callback(
Output('alert-button', 'children'),
Input('alert-button', 'n_clicks'),
suppress_callback_exceptions=True,prevent_initial_call=True,
)
def update_output(n_clicks):
return "Button is click"
with the next error:
Attempting to connect a callback Input item to component:
“alert-button”
but no components with that id exist in the layout.
If you are assigning callbacks to components that are
generated by other callbacks (and therefore not in the
initial layout), you can suppress this exception by setting
suppress_callback_exceptions=True
.
This ID was used in the callback(s) for Output(s):
alert-button.children