Callback executing several times if I return a div.HTML but not if I return a figure

Dash Python
1

I have these input and button components in my Dash App:

html.Div(
     dcc.Input(
          id='id_selector',
          placeholder='',
          type='text',
          value=''
     )
),

html.Button(
      type = 'submit',
      id = 'submit-button',
      className = 'btn btn-info',
      children = [
            html.Span('Go!'),
      ]
)

and these components:

html.Div(id='output'),
html.Div(
     dcc.Graph(id='heatmap_id')
)

Then I add a callback like this:

app.callback(
    Output(component_id='output', component_property='children'),
    [Input('submit-button','n_clicks')],
    [State('id_selector', 'value')])

def update_output(n_clicks, input_ID):
    print(input_ID)

    return html.Div(
              "you have selected"+input_ID
           ,id='output')

However, when I do this, the callback executes several times and not only if I click on the button.

If I made this change:

app.callback(
        Output('heatmap_id', 'figure'),
        [Input('submit-button','n_clicks')],
        [State('id_selector', 'value')])

def update_output(n_clicks, input_ID):
    print(input_ID)

    {HERE I CREATE A THE FIG}

    fig = go.Figure(data=data, layout=layout)

    return fig

In this case everything works fine and the Callbacks is only executed if I click on the button.

Why is this difference?

The reason because I want to use the first option (return a html.Div instead of a figure) is because when I enter my app I have an empty plot in the second case and I would like to have an empty space at first.

2

I have solved it, The problem is the line

return html.Div(
          "you have selected"+input_ID
       ,id='output')

It should be:

return html.Div(
          "you have selected"+input_ID
       )
1 Like