Multiple updates from client-side callback

Dash Python
1

Hi everyone,

I am using:

dash version: 2.13.0
dcc version: 2.12.0
html version: 2.0.14
python: 3.11.4

I have these two inputs that I want to change values of, I’m trying to do it using client-side callbacks. I’m using client-side callback since I need to check every second to update these values, and I think doing it client-side is a better approach.

The problem is that when returning the values outside the setInterval function, the inputs are updated correctly once and it is working. But if I return inside the setInterval function, the updates dont work.

Now that I’m thinking more about it, would manually updating it using javascript be a good option, using document.getElementById(‘id’).value

Here is the client-side js, for simplification I have removed the calculations for these numbers

        tracking_satellite: function (is_modal_open) {
            if (!is_modal_open) {
                const intervalId = localStorage.getItem("intervalId");
                window.clearInterval(intervalId)
                return ["123", "232"]
            } 

           // here I do some "heavy" calculations,
           // so I want to run this once, but continue updating 
          // the interface using the same callback

            intervalId = window.setInterval(function () {
                   return ["5", "1"]
            }, 2000);
            localStorage.setItem("intervalId", intervalId);
        }

Dash app.py file

clientside_callback(
    ClientsideFunction(
        namespace='clientside',
        function_name='tracking_satellite'
    ),
    [Output("antenna-elevation-value", "value"),
     Output("antenna-azimuth-value", "value")
    ],
    Input("track_satellite_offcanvas", "is_open"),
)

Thanks beforehand.

2

I’m not sure exactly what you’re after with

“I want to run this once but continue updating the interface using the same callback”

but returning within setInterval is not working because (not sure of the exact words) but setInterval is executed in a different context and therefore those return values go … not sure where but not to the tracking_satellite parent function. It’s essentially an entirely different function.

I believe Dash Callbacks have to have an output assigned, so you might consider having your setInterval call instead update localStorage with the values you’re wanting to store, then have a separate clientside_callback fire on that change to update the inputs.

EDIT: The whole have a separate callback fire on that change doesn’t actually fire when you write to localStorage anyway so this isn’t great advice.

3

Hello @yoyoge123,

Welcome to the community!

JS sole functions cannot be use directly to manipulate things that the dash server sees, you need to make sure that you trigger the function that the dash renderer is listening to.

Now, with what you are trying to do, I’m not sure how the localStorage responds, but what you can do is have a button that is set to sync the localStorage on a clientside callback:

app.clientside_callback(
    """function (d) {
        return localStorage.getItem('storage')
    }""", Output('storage', 'data'), Input('hiddenButton', 'n_clicks')
)