How to call javascript function externally to use in client side callback?

Dash Python
1

Client side callback contains function which I am looking to place in single js file to avoid duplicacy.

2

Just to confirm: you want to use one function in multiple clientside callback functions, is that right?

If that is the case, I believe you can simply define the function on the same js file where you define the callbacks (in the global scope).

1 Like
3

Issue is clientside callback is in children folder and I am trying to define js file in parent. Client side callback is “py” so facing issue with importing function and utilising the same in “client side callback” py module.

Code structure:

Folders:
common==> Need to define Javascript function here
Tool specific==> Need to import function here

Code:

dash_app.clientside_callback(

        """ function abc(){
                               function body
                  }
         """

I want to change this to:

import {abc} from ../abc.js
dash_app.clientside_callback(

        """ function abc() //Calling function directly here
         """

abc.js contains


export function abc(){ function body }
4

Ok. You can’t just import a javascript function in python. You have to export it to the global scope via a script and scripts are usually defined in the assets/ folder (although I believe that can be changed).

If abc is a callback function and you want to reuse it in multiple parts of your app, why not define it directly as a window object and use ClientsideFunction to invoke it in python? For reference, please look at the second example in this page.

2 Likes
5

Thanks for prompt response. I tried creating js file and now I was planning to add function inside js file from another js file but no luck:

Uncaught SyntaxError: Cannot use import statement outside a module

Later I created something like this under asset and its working:

  • Created clientside callback in asset folder

  • Defined function in another js file under asset (without using export)

  • Used common function in clientside callback

It throws import error when we define common function outside asset folder