vivekvs1 / dash-dual-listbox

Dual listbox for Dash. Original component: https://rawgit.com/jyotirmaybanerjee/react-duallist/master/example/examples.html#
12 stars 10 forks source link

Callback not working #2

Open michaelsweeney opened 5 years ago

michaelsweeney commented 5 years ago

I'm using the "Usage.py" example code (with comments removed and "Display" Div added) and the Dual Listbox is shown, but I can't get the callback to fire. Is this example current?

from dash_dual_listbox import DualList
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash('')

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div([
    DualList(id='DualList', available=[{'label': 'sdf', 'value': 'AL'},
                                       {'label': 'Alassdfsdfka', 'value': 'AK'},
                                       {'label': 'Arizona', 'value': 'AZ'},
                                       {'label': 'Arkansas', 'value': 'AR'},
                                       {'label': 'California', 'value': 'CA'},
                                       {'label': 'Colorado', 'value': 'CO'},
                                       {'label': 'sdfg', 'value': 'CT'},
                                       {'label': 'Delaware', 'value': 'DE'},
                                       {'label': 'Florida', 'value': 'FL'},
                                       {'label': 'Georgia', 'value': 'GA'}],
             selected=['AL']),
    html.Div(id='display', children=[])
])

@app.callback(Output('display', 'children'),
              [Input('DualList', 'selected'),
               ])
def display_output(c):
    return c[0]

if __name__ == '__main__':
    app.run_server(debug=True)
vtslab commented 5 years ago

I had the same problem, so I decided to try the source rather than the PYPI package. The following works for me:

git clone https://github.com/vivekvs1/dash-dual-listbox.git
cd dash-dual-listbox
git checkout 9067f3d93a022c00155bc68b7bdc55c7ab530097
npm install
npm run build:js
npm run build:py
gedit usage.py    # uncomment callback as in your code above
mkdir assets
mv dash_dual_listbox/style.css assets
python usage.py
sudonorm commented 2 years ago

I also had the same problem.

For those who might be struggling with getting callbacks to work when the package was installed via pip, I can confirm that rebuilding the package as @vtslab described above fixes the issue.

Thanks for this @vtslab!