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')],
)
7

Switching to client-side callback means that additional JS files must be sent to the client. If you already had your Dash app running and your web browser client connected to it, then you added a client-side callback, your client session may throw this error as it still has the old JavaScript files. To fix this, you can force a page reload that includes all JavaScript files with Ctrl+F5. That resolved this error for me.