Clientside callback example with .js function throws “cannot read property ‘apply’ of undefined” error

Dash Python
1

Hi,
I’ve tried to use the cannonical examples given for the clientside callbacks using a js function.

The code I’m using is exactly the one prescribed:

import dash
from dash.dependencies import ClientsideFunction, Input, Output, State
import dash_core_components as dcc
import dash_html_components as html


app = dash.Dash(__name__)


app.layout = html.Div(children=
    [
        dcc.Input(id='input', value='hello world'),
        html.Div(id='output - clientside'),
        html.Div(id='output - serverside')
    ]
)

@app.callback(
    Output('output - serverside', 'children'),
    [Input('input', 'value')])
def update_output(value):
    return 'Server says “{}”'.format(value)

app.clientside_callback(
    output=Output('output - clientside', 'children'),
    inputs=[Input('input', 'value')],
    clientside_function = ClientsideFunction(
        namespace='clientside',
        function_name ='display'
    )
)


if __name__ == '__main__':
    app.run_server(debug=True)

The display.js function sits in the /assets folder and is as foolows:

if(!window.dash_clientside) {window.dash_clientside = {};}
window.dash_clientside.clientside = {
    display: function (value) {
        return 'Client says "' + value + '"';
    }
}
}

Any help would be welcome since I need to accelerate some of my objects’ rendering by sending them to the client side.
Thanks.

2

Thanks for reporting @florescorreia. If this doesn’t work then it’s a bug with our docs. Can you print out which versions of dash your using?

3

These are the ones in this particular environment:

dash==1.15.0
dash-bootstrap-components==0.10.5
dash-core-components==1.11.0
dash-html-components==1.1.0
dash-renderer==1.7.0
dash-table==4.10.0

Thanks for your interest and reply.

4

@florescorreia Sorry for the delay here. I looked into this and you’re correct, this example doesn’t work.

The syntax that you supplied looks out of data from our official documentation: http://dash.plotly.com/clientside-callbacks. Where did you find this example? I’d like to make sure that it’s updated.

For your particular example, the syntax is this:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        display: function (value) {
            return 'Client says "' + value + '"';
        }
    }
});

Using this syntax works for me with the latest version of Dash.

5

To be more specific, this particular code block doesn’t work because there is a syntax error - an extra } at the end. This is reported in the browser’s dev tools console:

image
image1283×77 16.2 KB

You can remove this sytnax error and it will work.

6

Thanks, I tried your solution, but still it does not work – I suspect it’s something on my localhost server (ubuntu 20.04) that I apparently don’t know how to address.
However, the example works just fine when I embed the js code in the callback like this:

app.clientside_callback(
    """
    function(value) {
        return 'Client says:: "' + value + '"';
    }
    """,
    output = Output('output - clientside', 'children'),
    inputs = [Input('input', 'value')],
)