Callback not working for radioitem

Dash Python
1

Hello I am developing a UI where I would like to get a dcc.input and a Button when a radioItem is selected. I am creating two different functions and trying to callback them in the app.callback function( the final func) but when I run the radioitem when selected it returns nothing.

below is the code

Func for the radio item:

def radio_itm():
children = html.Div([
    ([html.Div(
html.Label('Selected UPC Details'),
style = {'fontWeight':'Bold','fontsize':'25'}),
             ]),
html.Div(
dcc.RadioItems(id = 'UPC_select',
         options = [{'label': 'ABS (default)', 'value': 'ABS (default)'},
                    {'label': 'ALH', 'value': 'ALH'},
                    {'label': 'Missing No', 'value': 'Missing No'}] ))])
return children

Function for the dcc.input and Button

def upc_selection():
children = [html.Div([
    html.Div([
        html.Label(("Enter a Number : "),
        style = {'width': '180px','display': 'inline-block','color':'Black',
                          'margin-left':'250px','fontWeight':'Bold','font-style': 'italic',
                          'verticalAlign' : "middle"}),
                   html.Div(
                       dcc.input('',
                                 style = {'font_family':'Gotham',
                                   'fontSize':10,
                                   'textAlign': 'left',
                                   'fontWeight':'Bold',
                                   'font-style': 'italic',
                                   #'margin-left':'0px',
                                   'display': 'inline-block',
                                   'marginBottom':'10px',
                                   'width': '100px',
                                   'backgroundColor':'#FFFACD',
                                   'color': colors['text']}),
                       html.Div(
                           html.Button("Find ME",className = "Find ME",
                                       style = {'backgroundColor':'#FF7F50',
                                    'border-radius': 9,
                                    'type':'Bold',
                                    'color':'Black',
                                    'height':'25px',
                                    'marginLeft':'20px',
                                    'width':'90px',
                                    'text-align':'center',
                                    'display':'inline-block'}),
                           style={'width': '100px', 'display': 'inline-block'}))
                   ]),html.Div(id = 'output-data1-promo')
                   ]),
    ]
return children

@app.callback(
[Output('output-data1-promo','children')],
[Input(component_id ='UPC_select',component_property = 'value')])

def upc_layout(q,value):
    child = upc_selection(q)
    radio=radio_itm(value)
    if value == 'Analytics List Hierarchy':
    return child
2

Hi @karishma and welcome to the Community.

I can’t follow your code, but in the callback you have only one Input that is the value of the radio item, but in the callback function you assigned two diferent values (q, value) :thinking:

3

Hello there,thank you for this, I would like to know can I write 2 functions for one callback ? like below

Now below is the output , callback for a defined func.

Defined Func
def upc_selection(val):
children = [html.Div([
html.Div(
children=[html.Div(
html.Label(‘Selected UPC Details’),
style = {‘fontWeight’:‘Bold’,‘fontsize’:‘25’,‘margin-left’:‘10px’}), ]),
html.Div(
dcc.RadioItems(id = ‘UPC_select’,
options = [{‘label’: ‘LMC Tagged UPCs (default)’, ‘value’: ‘LMC’},
{‘label’: ‘Analytics List Hierarchy’, ‘value’: ‘Hierarchy’},
{‘label’: ‘Missing UPC’, ‘value’: ‘NA’}],value = ‘LMC’ )),

html.Div(id = "selection", children = [html.Div
                                          ([html.Div(html.Label(" Enter Analytic UPC :  "), 
                            style = {'width': '180px','display': 'inline-block','color':'Black',
                          'margin-left':'25px','fontWeight':'Bold','font-style': 'italic','verticalAlign' : "middle"}),
                         dcc.Input('',
                            style={'font_family':'Gotham',
                                   'fontSize':10,
                                   'textAlign': 'left',
                                   'fontWeight':'Bold',
                                   'font-style': 'italic',
                                   'margin-left':'0px',
                                   'display': 'inline-block',
                                   'marginBottom':'10px',
                                   'width': '100px',
                                   'backgroundColor':'#FFFACD',
                                   'color': colors['text']}
                                      ),
                html.Button("Find List",
                             style={'backgroundColor':'#FF7F50',
                                    'border-radius': 9,
                                    'type':'Bold',
                                    'color':'Black',
                                    'height':'25px',
                                    'marginLeft':'20px',
                                    'width':'90px',
                                    'text-align':'center',
                                    'display':'inline-block'}
                                  ),
                           
                                           ]),

html.Div([html.Div(
html.Label(“Measurement Size:”,
style={‘marginLeft’:‘30px’}),
style={‘width’: ‘173px’, ‘display’: ‘inline-block’,‘fontWeight’:‘Bold’}),
html.Div(
dcc.Dropdown(
id=‘measurement_size-dropdown’,
options = [ {‘label’: ‘OZ’, ‘value’: ‘OZ’},
{‘label’: ‘CT’, ‘value’: ‘CT’},
{‘label’: ‘NU’, ‘value’: ‘NU’},
{‘label’: ‘LB’, ‘value’: ‘LB’}],
#value=df[‘client_nm’].iloc[0],
placeholder=“Select Measure”,
style={#‘backgroundColor’: colors[‘background’],
‘font_family’:‘Gotham’,
‘fontSize’:13,
‘marginLeft’:‘31px’,
‘height’: ‘25px’}
),
style={‘width’: ‘302px’, ‘display’: ‘inline-block’}
),
html.Button(“Apply Changes”,className=“Apply Changes”,
style={‘backgroundColor’:’#DEB887’,
‘border-radius’: 10,
‘type’:‘Bold’,
‘fontSize’:13,
‘color’:‘Black’,
‘height’:‘30px’,
‘marginLeft’:‘200px’,
‘width’:‘120px’,
‘text-align’:‘center’,
‘display’:‘inline-block’}
),
]),

html.Div(
                 html.H2("Available Brands:",
                        style={'font_family':'Gotham',
                            'fontSize':22,
                            'textAlign': 'left',
                            'margin-left':'10px',
                            'color': colors['text']})
                     ),
        html.Div(
                   dash_table.DataTable(
                                columns=[{'name': col,'id': df_table3.columns[idx]} for (idx, col) in enumerate(data3_columns)],
                                data=df_table3.to_dict('records'),
                                fixed_rows={'headers': True, 'data': 0},                            
                                page_size=10,
                                style_cell={'textAlign':'left','minWidth': '10px', 'maxWidth': '50px','backgroundColor': '#FFFACD',
                                            'textAlign': 'center'},
                                style_header = {'backgroundColor': '#003968','fontWeight': 'bold','color':'white'},

                        ) 
                       ),
                                # ])
 ])])]
return children

@app.callback(
[ Output(‘output-data-promo’, ‘children’),Output(‘UPC-sec’,‘children’)],
[Input(‘table2’, “derived_virtual_selected_rows”),Input(‘table2’, “derived_virtual_data”)]
)

def update_datatable(p,rows):
children = [html.Div()]
children1 = [html.Div()]
master_bl=99
if p == None:
p =
df8 = pd.DataFrame(rows)
if len(df8.iloc[p,:]) >=1:
children1 = upc_selection(df8.iloc[p][‘master_promo_src_id’])
master_bl=df8.iloc[p][‘master_promo_src_id’].values[0]
df_table4 = pull_data_main(4,master_bl)
children = layout_design(df_table4)
#children = layout_design(df8.iloc[p,:])
return children, children1

So now the above function works fine as I needed. Now, I would like to display the df_table3 dataframe as well when a row is clicked on table2. so how can add into the same update_datatable function ?
I added something like below
def update_datatable(p,rows,q,row):
children = [html.Div()]
children1 = [html.Div()]

children2 = [html.Div()]

children3 = [html.Div()]

master_bl=99
if p == None:
    p =[]

if q == None:

q= 

df8 = pd.DataFrame(rows)
df9 =pd.Dataframe(row)
if len(df8.iloc[p,:]) >=1:
    children1 = upc_selection(df8.iloc[p]['master_promo_src_id'])
    master_bl=df8.iloc[p]['master_promo_src_id'].values[0]
    df_table4 = pull_data_main(4,master_bl)
    children = layout_design(df_table4)
elif len(df9.iloc[q,:]) >=1:
    children2 = upc_selection(df9.iloc[q]['master_promo_src_id'])
    master_bl=df9.iloc[q]['master_promo_src_id'].values[0]
    df_table3 = pull_data_main(3,master_bl)
    children3 = layout_design(df_table3)
    return children2,children3
   
else:
    return children, children1

BUt does not work