Client side call back

Dash Python
1

Hi team,
I have my client side call back as below, but clicking my button does not trigger the callback. To make sure the button is working, I created a very simple server side callback which is triggered by clicking the button, and it worked. Would you have nay hints for me:

clientside_callback(
    """
    async(n_clicks, filter_data) => {
         if (n_clicks) {
            const gridApi =  await dash_ag_grid.getApiAsync("dashboard-grid");
            filter_data = gridApi.getAdvancedFilterModel();
            console.log("Hi");
         }
         console.log("Hi");
         return filter_data;
    }""",
    Output('advanced-filter-model', 'data'),
    Input('save-advanced-filter-btn', 'n_clicks'),
    State('advanced-filter-model', 'data'),
    prevent_initiall_call=True
)

Thanks

2

Hello @231530353,

Have you tried added a space between the async and the opening ( ?

3

Thanks for your reply, I just tried it out, no luck, would you know how I can troubleshoot?

This is how it looks like in the dev tools:

<script>
        (function() {
            var clientside = window.dash_clientside = window.dash_clientside || {};
            var ns = clientside["_dashprivate_clientside_funcs"] = clientside["_dashprivate_clientside_funcs"] || {};
            ns["25ad466ba3698b37128447408b2dbd1980b972fb7bccc7179d76b93eeb66f0d5"] =
            async function(n_clicks, filter_data) {
                if (n_clicks) {
                    const gridApi = await dash_ag_grid.getApiAsync("dashboard-grid");
                    filter_data = gridApi.getAdvancedFilterModel();
                    console.log("Hi");
                }
                console.log("Hi");
                return filter_data;
            };
        })();
        </script>
4 
clientside_callback(
    """
    async (n_clicks, filter_data) => {
         console.log(n_clicks)
         if (n_clicks) {
            const gridApi =  await dash_ag_grid.getApiAsync("dashboard-grid");
            filter_data = gridApi.getAdvancedFilterModel();
            console.log("Hi");
         }
         console.log("Hi");
         return filter_data;
    }""",
    Output('advanced-filter-model', 'data'),
    Input('save-advanced-filter-btn', 'n_clicks'),
    State('advanced-filter-model', 'data'),
    prevent_initiall_call=True
)

Try this, also are there any errors in the console?

If the grid isnt accessible, then you wont see it.

1 Like
5

no error in console and no logs at all. For some reason the button does not trigger the client side callback.

6

we have two .py files, one for layout and for callbacks, do you think this structure can prevent client-side callbacks from being registered properly?

7

Are you importing the callbacks?

Have you refreshed your page since applying the changes?

8

I do, any other server side callbacks working, just this client side is not working. Should I put it in any specific order to the server side callbacks?

9

You shouldnt need to, it seems like it is porting over properly.

Did you refresh the whole page in the browser?

10

I did :thinking:

any dash ag grid version I should install by any chance?

11

That should still have the console log of the n_click.

For the api, you need at least 30 if I recall.

1 Like
13

Is there any os dependency or browser dependency?

14

Nope, there isn’t.

The error you removed seems like you may be importing it into the app multiple times.

Make sure you are only importing the callbacks in a single place in the app.

15

Would you know please if I should import clientside_callback from my dash instance or dash package itself:

from dash import clientside_callback

vs.

app.clientside_callback where app=app = dash.Dash(name, external_stylesheets=[dbc.themes.FLATLY], suppress_callback_exceptions=True)

16

Without seeing how your app works, you can do either…

Do you have other clientside callbacks working in the app?

17

ah, it is working, the issue was app.clientside_callback. Honestly Im still not sure I understand when to use dash.clientside_callback.

Thanks for being so patient and answering my questions promptly.

18

app can only be used when the app is available.

If you have other files working with it, use things from dash instead. :slight_smile:

1 Like