Handling Double Callbacks in Dash

Dash Python
1

Hey,
I have a fairly big search based app with 10/15 callbacks linked to 3 components. One of my callback functions creates new buttons and returns these buttons to the app layout. However, when I try writing callbacks for these buttons I do not get any output. My app is structured something like this:

app.layout = html.Div(
     html.Button('submit', id='sub'),
     html.Div(id='output')
)

@app.callback(Output('output', 'children'), [Input('sub', 'n_clicks')]
def create(n):
    if n != None:
         return html.Button('example', id='test')

This code creates a new button with id test but I cannot use this button for anything. I want a function to be called when I click on this id=‘test’ button but this does not happen. Can someone clarify why?

2

Hi @Sumant, welcome to the forum!

This kind of thing is supported. Here’s a quick example:

import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__, suppress_callback_exceptions=True)


app.layout = html.Div([
     html.Button('submit', id='sub'),
     html.Div(id='output'),
     html.Div('final-out', id='output2')
])


@app.callback(Output('output', 'children'), [Input('sub', 'n_clicks')])
def create(n):
    if n is not None:
        return html.Button('example', id='test')


@app.callback(Output('output2', 'children'), [Input('test', 'n_clicks')])
def on_click(n):
    return repr(n)


if __name__ == '__main__':
    app.run_server(debug=True)
1 Like