1

I am trying to disable a button while processing a request in dash. Currently I have this (Display loading symbol while waiting for a result with plot.ly Dash) implemented. I am trying to figure out how can I disable a button while a long query is on going.

Here are the logics that I tried:

Logic 1: (I am receiving Circular Dependecy error)

  • callack 01:

    • input: button n_click
    • input: DIV last updated (if DIV children populated, set button disabled to false)
    • output: button disabled (if Button no_click set to true)

  • Callback 02:

    • input button n_click
    • output DIV last-updated

Logic 2: (error due same output for both CBs)

  • Callback 01:

    • Input Button n_click
    • output Button disabled
    • output last-update

  • Callback 02:

    • Input last-update children
    • Output Button disabled

I also tried dcc.Loading with the button. I can activate the spinner, but the button keeps enabled.

html.Div([dbc.Button("load data", id="but-data", className="mr-2", disabled=False), dcc.Loading(id="loading-1", type="default", children=html.Div(id="loading-output-1"))]),

any suggestion?

Kara
  • 6,115
  • 16
  • 50
  • 57
iops
  • 60
  • 1
  • 5
  • 1
    actually a better way to ask that is: how can I change the button state while processing a callback? – iops Aug 01 '20 at 06:58
  • If you want to edit you Question, there's an option for that. Just click "edit" right under your Question. – Scratte Aug 01 '20 at 14:35

1 Answers1

1

I had a similar issue. I solved it using a global computing variable and a children updating callback:

computing = False

#example definition
button = dbc.Button([dbc.Spinner([],id='spinner') ], id ='button', block=True, id = id)
## app code here

<your code>

### callback on click

@app.callback([Output("button",'disabled'),Output("spinner",'children')],Input('button','n_clicks'))
def updatefn(input):
    global computing
    if computing:
        return True,[dbc.Spinner(color="light",size='sm')]

    else:
       computing = True
       do something

      # finish
      computing = False
       return False,[]

This method does not execute the function again, and disables the button for the duration of the computation.

user2589273
  • 2,379
  • 20
  • 29
  • I tried this approach and only the spinner works - the disabled state doesn't update for some reason. I couldn't declare the button the same way as you did and ended up doing this: `gobutton = html.Div([dbc.Button("Go!",id="submit-button-state-go-run-query",n_clicks=0,disabled=False,style={'width': c.input_width,'margin-bottom': '10px'},),dbc.Spinner(html.Div(id="spinner")),])` – erixliechtenstein Nov 20 '21 at 13:41