Best way to update core components via AJAX?


#1

I love that dash doesn’t need to run instances of the server for each user and maintain a web-socket like Shiny or Jupyter but I have a need to fetch data as the user who is on the site (ldap). This means I need to get the data via AJAX instead of using a pandas DataReader on the server side.

Is there a standard way to do this in Dash?

For example. when someone types text into a textbox i need to query a remote API using AJAX then use the json response to populate a dropdown. When an item is selected in the dropdown I then need to make another AJAX call to get the data to be plotted. This is all easy enough when using server side calls but for my case it needs to be via AJAX. (I have done this outside of Dash using jquery)

The following doesn’t work but shows my current and probably incorrect approach to the problem. When the input changes, the callback injects javascript into the page to make the ajax call and will then make other page updates. This seems a mess. help! Thanks!

app.layout = html.Div(children=[
dcc.Input(id=‘country-id’, value=‘us’, type=‘text’),
html.Script(id=‘my-output’)
])

@app.callback(
Output(component_id=‘my-output’, component_property=‘children’),
[Input(component_id=‘country-id’, component_property=‘value’)]
)
def update_output_div(input_value):
return ‘alert("{}");’.format(input_value)


#2

The standard way to do this in Dash would be to build a custom Dash React component that fetches the data for you, sets that data as a property, and passes allows dash’s front-end to pass that data down to the callback if it was subscribed to.


#3

Thanks for the pointer Chris.


#4

Do i have to publish my component for this to work? https://dash.plot.ly/plugins

Sorry if this is a dumb question, I’m not a node or react guy yet. It is certainly easier if the component can live on my internal network (all our other custom code like gems and python packages work fine from the filesystem without the need for gem or pip).