Hi all,
I’m currently trying to make Interactive RadioButtons.
By clicking “up” or “down”, I want the selected question to move in those directions.
In order to avoid interference between the buttons (i.e. when the n_clicks are greater than 0, the questions won’t move since both are greater than zero), I’d like to reset the buttons after each click.
However, I can’t seem to be able to do that through callbacks (I get the “Error loading dependencies” messages).
Does anyone have any suggestions regarding how to solve this issue?
Thanks in advance,
Fred
Code:
from dash.dependencies import Input, Output, State
import dash
import dash_core_components as dcc
import dash_html_components as html
################
Gen Function
################
def findi(options, val):
print(options)
print(val)
for i in range(len(options)):
if list(options[i].values())[1] == val:
return i
##################
App Definition
##################
app = dash.Dash()
app.scripts.config.serve_locally = True
app.config[‘suppress_callback_exceptions’]=False
app.css.append_css({‘external_url’: ‘https://codepen.io/chriddyp/pen/bWLwgP.css’})
app.layout = html.Div([
html.H4(‘Change Question Order’),
dcc.RadioItems(
id = ‘radio1’,
options=[
{‘label’: ‘Question 1’, ‘value’: ‘Q1’},
{‘label’: ‘Question 2’, ‘value’: ‘Q2’},
{‘label’: ‘Question 3’, ‘value’: ‘Q3’},
{‘label’: ‘Question 4’, ‘value’: ‘Q4’},
{‘label’: ‘question 5’, ‘value’: ‘Q5’}
],
value=‘Q1’
),
html.Br(),
html.Button(‘Up’, id=‘button5’, n_clicks = 0),
html.Button(‘Down’, id=‘button6’, n_clicks = 0)
])
##################
App Callback
##################
@app.callback(Output(‘radio1’, ‘options’),
[Input(‘button5’, ‘n_clicks’),
Input(‘button6’, ‘n_clicks’)],
[State(‘radio1’, ‘value’),
State(‘radio1’, ‘options’)])
def changeorder(but5,but6,val,opt):
print(“up = {0}, down = {1}”.format(but5,but6))
ind = findi(opt, val)
if but5 > 0:
if ind >= 1:
x = opt[ind - 1]; opt[ind - 1] = opt[ind]; opt[ind] = x
if but6 > 0:
if ind <= (len(opt) -2):
x = opt[ind + 1]; opt[ind + 1] = opt[ind]; opt[ind] = x
return opt
@app.callback(Output(‘button6’, ‘n_clicks’),
[Input(‘button6’, ‘n_clicks’)])
def resetbut6(but6):
if but6 > 0:
return 0
@app.callback(Output(‘button5’, ‘n_clicks’),
[Input(‘button5’, ‘n_clicks’)])
def resetbut5(but5):
if but5 > 0:
return 0
#####################
On-Load Directive
#####################
if name == ‘main’:
app.run_server(debug=True)