Run dash on loaded html page/file while using dash for callback only

Hello, this my first topic on the wonderful DASH lib :slight_smile:

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

Hello @netanel,

Welcome to the community!

Callbacks are only available for Dash controlled components. Since you are adding your own html to the div, this does not fall within the scope of what Dash can see unfortunately.

thanks for the quick answer :slight_smile:

1 Like