Use example of client side callbacks doesn't work

Dash Python
1

Hi guys!

I want to test the potentiality of using client side functions. Firstly, I’ve tried to run an example from documentation.

Here is my app (clientside_0_simple.py):

import dash
print(dash.version)

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

app = dash.Dash(name)

app.layout = html.Div([
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, host = ‘0.0.0.0’, port = 8092)

And assets/clientside.js:

window.clientside = {

display: function (value) {
    return 'Client says "' + value + '"';
},

}

However, this doesn’t work. The second DIv (output-serverside) is shown properly, but the first one doesn’t appear. I think this should be an extremely simple issue, but I can’t reach a solution.

Thanks you very much in advance.

2

First, please utilize appropriate markdown so your code is easy to read.

I was able to make your client_side_simple.py work (using the most recent - aka today’s version - of Dash) but I modified the .js file as shown below:

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

This change was taken directly from 📣 Dash 0.41.0 released

4

Thanks you for your response.

However, after upgrading all my packages and modified .js file as you said, it doesn’t work yet :frowning:

5

NOTE: I’m running on Linux.

Here is the .py file I used.

import dash
from dash.dependencies import Input, Output, State, ClientsideFunction
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)
6

Well, I’m using macOs, not Linux…

But I tested it in a Linux server and does not work…

Anyway thanks you very much!

8

I would also like some more information on this. Here’s my code:

app.clientside_callback(
	"""
    function placeholder(data) {
        window.data_to_copy = data;
        var copyText = document.getElementById("chart-settings");
        console.log("copytext is ", copyText)
        copyText.select();
        document.execCommand("copy");
    }
	return 'True'
    """,

	Output('export-settings-alert', 'is_open'),
	[
	Input('chart-settings', 'value')
	]
)

The error comes back as: True is not defined. This is currently a dbc.Alert but I’ve also tried using a dcc.Div and setting the className for the Output and I get an error that “Cannot read property ‘className’ of undefined” as if Dash can’t find the element. It’s definitely there.

10

I was able to resolve this by changing my return value from False to false. It needs to be lowercase and without the quotes for Javascript.

return false