Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! ✅Check out the new docs.

Edit multiple div parameters through single callback

Is there a way to edit multiple div parameters within a single callback? I essentially have a dcc.Dropdown component, and I want to edit its options and value based on the rows in another dt.DataTable.

Is there any way to do this other than doing the following:

@app.callback(Output('dropdown', 'options'), [Input('datatable', 'rows')])
   def update_dropdown_options(rows):
    ...

@app.callback(Output('dropdown', 'value'), [Input('datatable', 'rows')])
def update_dropdown_value(rows):
    ...

I have to do this for multiple dropdowns as well. If there is no way to do this, can anyone suggest another approach?

You could replace the entire Div each time by having the output be Output('dropdown-parent', 'children'). Where ‘dropdown-parent’ is the id of the parent element. There are disadvantages to this though (other states get reset).

However directly having 1 callback have multiple Outputs is not yet supported by Dash, but I believe it’s coming soon!

Hmm ok. I was updating the entire div previously, but it led to some problems :frowning: Good to hear that it is coming soon, in the meantime, I’ll just do it the long way. Thanks for the reply!

Hi, I also have the similar problem where i want to receive data from many input box at once. Making a callback with multiple input box as input is hard to manage. Hopefully i can make a div containing all the input boxes and use the div as input to the callback.

How would you go about doing that? Can you access the values of elements which are children of an input div? I didn’t know that was possible. If it is, can you post a code example showing how you’d do it? Thanks!

No. I am still trying. Not sure if it’s possible. My current code is:
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output,Input,State
app = dash.Dash(name)
app.scripts.config.serve_locally = True
interface1 = html.Div(id=‘interface1’,
children=[dcc.Input(id = ‘box11’,value=‘box11’),
dcc.Input(value=‘box12’,id = ‘box12’)]
)
interface2 = html.Div(id=‘interface2’,
children=[dcc.Input(value=‘box21’,id = ‘box21’),
dcc.Input(value=‘box22’,id = ‘box22’)]
)

app.layout=html.Div([
interface1,
html.Br(),
interface2,
html.Button(id=‘button’,n_clicks=0)]
)

@app.callback(Output(‘interface1’,‘children’),[Input(‘button’,‘n_clicks’)],[State(‘interface2’,‘children’)])
def two_trigger_one(n_clicks,int2):
if n_clicks>0:
#to update interface1
return int2

if name == ‘main’:
app.run_server(debug=True)

The callback makes the interface1 disappear. I will update if i find the way.