Black Lives Matter. Please consider donating to Black Girls Code today.

Checklist 'options' won't update on callback

I’ve searched around the forums and it appears like my callback setup is correct but I can’t update the options of a checklist.

I’ve confirmed that if I manual use parse_names(df) upon app execution that the checklist options appear. So I’m pretty confident in the return value to variableList (checklist2). Just to be sure I printed out the return value. Here’s part of it:
parsed = [{‘label’: ‘Device restarted’, ‘value’: 1}, {‘label’: ‘Device returned’, ‘value’: 2}, {‘label’: ‘Restraint Switch SW1’, ‘value’: 3}, {‘label’: ‘Restraint Switch SW2’, ‘value’: 4}, {‘label’: ‘Approach Vu Input’, ‘value’: 5},…}]

Links I’ve used:



https://dash.plot.ly/getting-started-part-2
https://dash.plot.ly/dash-core-components/checklist
https://dash.plot.ly/interactive-graphing

My checklist:
checklist2 = dcc.Checklist(
                id = 'variableList',
                style = {'overflow': 'auto','height': 400})


My app.layout
app.layout = html.Div([
    html.Img(src='data:image/png;base64,{}'.format(encoded_image2.decode()), width = 200),
    html.Div([
        html.Div([
            html.H3('Import Options', style={'text-align': 'center'}),
            html.Div([
            btn1,
            html.H3('Docks'),
            checklist1,
            html.H3('Variables'),
            checklist2],
            style = {'overflow':'auto','height': '80vh'})], 
            className="one-third column" ),
        html.Div([
            html.H3('Visualization', style={'text-align': 'center'}),
            ph1,
            dcc.RangeSlider(
                id='non-linear-range-slider',
                marks={i: '{}'.format(10 ** i) for i in range(4)},
                max=3,
                value=[0.1, 2],
                dots=False,
                step=0.01,
                updatemode='drag'),
            html.Div(id='output-container-range-slider-non-linear', style={'margin-top': 20}),
            btn2,
            html.Img(src='data:image/png;base64,{}'.format(encoded_image1.decode()), width = 200)], 
            className="eight columns")], 
        className="two rows")])


My button1 callback:
@app.callback(Output('variableList','options'), [Input('btn-1', 'n_clicks')])
def button1(value):
    if value == 0:
        return 
    else:
        ssh_client = paramiko.SSHClient() #create SSH client
        ssh_client.set_missing_host_key_policy(paramiko.AutoAddPolicy())
        ssh_client.connect('xxxxxxxx', username='xxxxxxx', password='xxxxx') #connect to server
        lstBuff = dbf.sendCommand(command, ssh_client)
        df = dbf.processMessage(lstBuff)
        ssh_client.close() #close the ssh portal
        parsed = parse_names(df)
        return parsed

Hmm, your callback definition and return value look right - though two small points about the value == 0 condition (so this probably isn’t your problem, just mentioning for future reference):

  • I wouldn’t just return when value == 0, better to return a valid empty options list like []
  • Also it’s more robust to use if not value, that saves you from having to explicitly initialize n_clicks to zero, the callback can also accept None.

Anyway you could check that everything but the data itself is OK by trying a constant return value like [{'label': 'a', 'value': 1}, {'label': 'b', 'value': 2}]. The only thing that occurs to me is perhaps one of the options has a missing a label or value field? They can be any string or number but not None / null / NaN. If you run the app in debug mode it will show you a message if that’s the problem.

1 Like

After inserting the ‘[ ]’ the Output callbacks are working as expected.

Thanks for your help and attention to good programming practices.

1 Like