# How to trigger a server-side callback from within a javascript?

**URL:** <https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230>\
**Category:** Dash Python\
**Created:** [November 19, 2023, 10:07am UTC](https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230 "2023-11-19T10:07:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmoussa](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tmoussa](https://community.plotly.com/u/tmoussa)\
**Post date:** [November 19, 2023, 10:07am UTC](https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230/1 "2023-11-19T10:07:51Z")

</div>

I want to trigger a server-side callback from within a javascript. Here is a simple javascript that changes the value of an input-component every second. However, this is not seen by dash and it doesn’t trigger the server-side callback. Any idea why is this? Or this is what it should be?

It should be noticed here that the value of the input component actually changes in each iteration in this loop. This can be shown in the browser and also when I console.log the value before and after assignment. However, the dash server-side callback is not triggered at all.

I also tried to add dcc.interval to trigger the server-side callback and State the input component. However, the value of the input component does not change from the initial value although both the javascript and browser show that the value is changed every 1 second as instructed in the code below.

I really appreciate your inputs as I have been scratching my head all day.

window.dash\_clientside.clientside = {  
iterate\_and\_display: function(n\_clicks, numbers) {  
const numbersArray = JSON.parse(numbers);

```
    let inputComponent = document.getElementById('hidden-input');

    function updateInputValue(index) {
        if (index < numbersArray.length) {
            let number = numbersArray[index];
            console.log('number:', number);
            console.log('inputComponent Value Before:', inputComponent.value);
            inputComponent.value = `(${number})`;
            console.log('inputComponent Value After:', inputComponent.value);
            
            setTimeout(() => updateInputValue(index + 1), 1000); // Wait 1 second before next number
        }
    }
    updateInputValue(0); // Start the process
    return '';
}

```

};

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [November 19, 2023, 12:38pm UTC](https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230/2 "2023-11-19T12:38:29Z")

</div>

Hello @tmoussa,

React is triggered by events, for this one to trigger the update and server side update, you’ll need to trigger the input event and or update event on the input.

If this doesn’t work, you’ll need to make the change in the react component.

You also know that you could use a clientside callback with the interval as the trigger and perform this same function that you have.

---

<div class="post-metadata">

**Author:** ![tmoussa](https://avatars.discourse-cdn.com/v4/letter/t/6a8cbe/32.png) [@tmoussa](https://community.plotly.com/u/tmoussa)\
**Post date:** [November 19, 2023, 5:31pm UTC](https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230/3 "2023-11-19T17:31:39Z")

</div>

Thanks @jinnyzor for your quick response.  
I tried to do so by;

```auto
var evt = new Event('input');
inputComponent.dispatchEvent(evt);

```

But, this doesn’t trigger the server-side callback.  
When I console.log ‘evt’ it shows:

```auto
evt: 
Event {isTrusted: false, type: 'input', target: null, currentTarget: null, eventPhase: 0, …}
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget : null
defaultPrevented: false
eventPhase: 0
returnValue : true
srcElement: input#hidden-input.dash-input
target: input#hidden-input.dash-input
timeStamp: 10680.20000000298
type:"input"
[[Prototype]]: Event

```

And it looks like it is enough to trigger the server-side callback.

Here is an example of what I want to do:  
I have a python function (ML model) and I want to iterate it over a range on inputs. And at each iteration, I want to display the output to the user while running. So, basically what I need is a ‘for loop’ inside the server-side callback. Apparently this is not applicable as once I return any value in the for-loop it ends the callback. So, I decided to use the javascript to update the value of the input component in a for-loop and this input value shall trigger the server-side callback to run my ML function and display the output. Then, I wait until this output is displayed then the javascript update the input value again and so on.  
So, basically it is displaying the incremental output while running.  
Hope this clarifies what I want to achieve here.

---

<div class="post-metadata">

**Author:** ![Louis](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@Louis](https://community.plotly.com/u/Louis)\
**Post date:** [November 20, 2023, 7:09am UTC](https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230/4 "2023-11-20T07:09:16Z")

</div>

Maybe this will help you 🙂

> [@Trigger Dash Callback from scroll (overflow div)](https://community.plotly.com/t/trigger-dash-callback-from-scroll-overflow-div/74658/3):
>
> Thank you so much, it actually worked. Nowhere I found a solution to triggering a Dash Callback from Javascript. Here is the full solution: #add virtualization based on scroll @app.callback( Output('table', 'n\_clicks'), Input('scrollpos', 'children') ) def virtualization\_table(scroll): print("scroll:") print(scroll) return None app.clientside\_callback( """ function(n) { var obj = document.getElementById('scrollpos'); var scrollpos = obj.innerHTML; …

---

<div class="post-metadata">

**Author:** ![valsorim](https://avatars.discourse-cdn.com/v4/letter/v/e47774/32.png) [@valsorim](https://community.plotly.com/u/valsorim)\
**Post date:** [November 20, 2023, 10:22am UTC](https://community.plotly.com/t/how-to-trigger-a-server-side-callback-from-within-a-javascript/80230/5 "2023-11-20T10:22:51Z")

</div>

[EventListener](https://www.dash-extensions.com/components/event_listener) from `dash_extensions` could also be useful here.