Button disable/enable while performing action

Dash Python
10

Hi I just learned about new matching features and thought those could help. Then, I realized that that may not be needed. Here I simply delete an existing button and create a new one in the function running time-consuming tasks, while another function is called to immediately disable the existing button.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
import time

# Note: commented-out lines use an alternative approach using dynanic index 


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

print('App is starting..')

app.layout = html.Div([
    html.Div(id='dynamic-button-container', 
    	children=[
    	html.Button(
    		#id={'type': 'dynamic-button', 'index': 0 },
    		id = 'button0',
    		children= 'Button'
    		)
    	]),
])

@app.callback(
    Output('dynamic-button-container', 'children'),
    [#Input({'type': 'dynamic-button', 'index': ALL}, 'n_clicks')
    Input('button0', 'n_clicks')
    ],
    [State('dynamic-button-container', 'children')])
def display_newbutton(n_clicks, children):
	#if n_clicks[0] is None: return children 
	if n_clicks is None: return children 
	else:
		print('Doing some calculation..') 
		time.sleep(3)

		new_element = html.Button(
		        #id={'type': 'dynamic-button','index': 0 }, #n_clicks[0] },
		        id = 'button0', 
		        children = 'Button' 
		    	)

		children.pop()
		children.append(new_element)
		print('Generating a new button')
		return children

# @app.callback(
#     Output({'type': 'dynamic-button', 'index': 0}, 'disabled'),
#     [Input({'type': 'dynamic-button', 'index': 0}, 'n_clicks')]
# )
@app.callback(
    Output('button0', 'disabled'),
    [Input('button0', 'n_clicks')]
)
def hide_newbutton(n_clicks):
	if n_clicks is None: return False
	else:
		print('Disabling the button')
		return True



if __name__ == '__main__':
    app.run_server(debug=True)
3 Likes