Python can't get value updated by clientside_callback

Dash Python
1

I have code as below:

from dash import Dash, html, dcc, Input, Output, State, no_update, clientside_callback


app = Dash(
    name=__name__, 
)

app.layout= html.Div([
    html.Button("click1", id="button1"),
    html.Button("click2", id="button2"),
    dcc.Input(id="input1"),
    html.Div(id="echo"),
    html.Div(id="echo2"),
])

clientside_callback(
    '''
    function (x){
        document.getElementById('input1').value="test";
        return ""
    }
    ''',
    Output("echo", "children"),
    Input("button1", "n_clicks"),
    prevent_initial_call = True,
)

@app.callback(
    Output("echo2", "children"),
    Input("button2", "n_clicks"),
    State("input1", "value"),
    prevent_initial_call = True,
)
def PrintInput(x, value):
    if x is None:
        return None
    return str(value)



server = app.server
if __name__ == "__main__":
    app.run_server(
        debug=True,
        port=8050
    )

What I want to do is user can click button1 to set value to input1 via a clientside_callback. This was simulation of user barcode scanning so I think I can’t make it through normal callback. Then I want to use the value of input1 set before, which is clicking button2 to show in echo2 here. But by this way I can’t get value of input1 in python. How to improve the code to get it? Thanks very much for your help.

2

You are returning an empty string in the JavaScript function.

You can use State of input1 like this:

from dash import Dash, html, dcc, Input, Output, State, no_update, clientside_callback


app = Dash(
    name=__name__, 
)

app.layout= html.Div([
    html.Button("click1", id="button1"),
    html.Button("click2", id="button2"),
    dcc.Input(id="input1"),
    html.Div(id="echo"),
    html.Div(id="echo2"),
])

clientside_callback(
    '''
    function (n_clicks, value){
        return value
    }
    ''',
    Output("echo", "children"),
    Input("button1", "n_clicks"),
    State("input1", "value"),
    prevent_initial_call = True,
)

@app.callback(
    Output("echo2", "children"),
    Input("button2", "n_clicks"),
    State("input1", "value"),
    prevent_initial_call = True,
)
def PrintInput(x, value):
    if x is None:
        return None
    return str(value)



server = app.server
if __name__ == "__main__":
    app.run_server(
        debug=True,
        port=8050
    )

or modify the javascript function:

from dash import Dash, html, dcc, Input, Output, State, no_update, clientside_callback


app = Dash(
    name=__name__, 
)

app.layout= html.Div([
    html.Button("click1", id="button1"),
    html.Button("click2", id="button2"),
    dcc.Input(id="input1"),
    html.Div(id="echo"),
    html.Div(id="echo2"),
])

clientside_callback(
    '''
    function (x){
        return document.getElementById('input1').value;
    }
    ''',
    Output("echo", "children"),
    Input("button1", "n_clicks"),
    prevent_initial_call = True,
)

@app.callback(
    Output("echo2", "children"),
    Input("button2", "n_clicks"),
    State("input1", "value"),
    prevent_initial_call = True,
)
def PrintInput(x, value):
    if x is None:
        return None
    return str(value)



server = app.server
if __name__ == "__main__":
    app.run_server(
        debug=True,
        port=8050
    )
1 Like
3

Wlecome to the forums, @EchoVoice

You could include the component input1 as output here: