How to use two functions for clientside callbacks within js-files

Dash Python
1

Hi,
I am currently trying to put my clientside callbacks out of my app.py-file into .js-files and am receiving an error.

As long as I have only one function and one .js-file everything works fine. However I want to have more than one function to call by clientside callbacks.

I tried to have two .js-files and two clientside callbacks and received an error:

TypeError: dc[namespace][function_name] is undefined
    _callee2$ callbacks.ts:151
    tryCatch callbacks.ts:2
    _invoke callbacks.ts:2
    defineIteratorMethods callbacks.ts:2
    asyncGeneratorStep callbacks.ts:2
    _next callbacks.ts:2
    _asyncToGenerator callbacks.ts:2

File 1 “function1.js”:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
		
		function1: function() {
			alert("first function");
		}	
    }
		
});

Callback 1:

app.clientside_callback(
    ClientsideFunction(
    namespace='clientside',
    function_name='function1'
    ),
    Output('dump-1', 'children'),
    Input('interval-1', 'n_intervals')
)

File 2 “function2.js”:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
		
		function2: function() {
			alert("second function");
		}	
    }
		
});

Callback 2:

app.clientside_callback(
    ClientsideFunction(
    namespace='clientside',
    function_name='function2'
    ),
    Output('dump-2', 'children'),
    Input('interval-2', 'n_intervals')
)

Can someone tell me how to define multiple functions for clientside callbacks in .js-files?

2

Found a solution by myself. I put both my functions in one .js-file like this:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
		
		function1: function() {
			alert("first function");
		},
		
		function2: function() {
			alert("second function");
		}
	
    }
		
});
2 Likes
3

Are there any requirements for the .js file name, so the ClientsideFunction can find it?

4

@Isisgv does this help?

5

Hi @Isisgv , the name of the .js-file does not seem to matter. You have to call your functions by their name in order for them to work. In my case I got the following in my app.py:

==========================================================================
clientside callback 1
"""
app.clientside_callback(
    ClientsideFunction(
    namespace='clientside',
    function_name='function1'
    ),
    Output('dump1', 'children'),
    Input('interval-1', 'n_intervals')
)

"""
==========================================================================
clientside callback 2
"""
app.clientside_callback(
    ClientsideFunction(
    namespace='clientside',
    function_name='function2'
    ),
    Output('dump2', 'children'),
    Input('interval-2', 'n_intervals')
)

The clientside callbacks are triggered by dcc.Interval.

1 Like
6

I don’t know why, but my application cannot find the js functions i want to use in the clientside callback…

this is app.py

app.clientside_callback(
    ClientsideFunction(
    namespace='clientside',
    function_name='update_main_with_coarse'
    ),
    Output("plotly-resampler-graph", "id", allow_duplicate=True),
    Input("coarse-graph", "selectedData"),
    State("plotly-resampler-graph", "id"),
    prevent_initial_call=True,
)

and this is assets/coarse_fine.js:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
		update_main_with_coarse: function(selectedData, mainFigID) {
			alert("update after selectbox\n" + selectedData);
		}	
    }	
});

I saw in the documentation that JS files should be automatically included in dash apps, but my clientside_callback doesn’t seem to find it. it gives the following error:

Cannot read properties of undefined (reading ‘update_main_with_coarse’)

any idea what could be causing this?

7

Try removing the trailing comma.

8

It sadly didnt work, I have also tried changing the current working directory, moving the .js file into different folders, etc… nothing worked…

9

There has just been a new release of dash fixing a bug concerning clientside functions https://github.com/plotly/dash/releases/tag/v2.9.3. Maybe updating dash will fix your issue.

1 Like
10

Yeah i guess it did! It works perfectly fine now!