✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚾️ It's finally Baseball season! Root for the home team... & Register for our Sports Analytics Webinar!

State callback is not reporting the real state

Hi,

I am modifying a the innerHTML of an element with js and jquery, (this works in the browser):

('*[id*=fpbutton]:visible').each(function() { if((this).attr(‘class’) === event.target.className){
console.log((this).attr('class')); console.log(document.getElementById('fpbutton_clicked')); var x = document.getElementById('fpbutton_clicked'); x.innerHTML = (this).attr(‘class’);
console.log(document.getElementById(‘fpbutton_clicked’));
console.log(’--------------------------------------------’);
}

	});

then I am firing a callback with the state of the parent:
the div:
current_fp_distribution_clicked = html.Div(id=‘fpbutton_clicked’,children = ‘hola’)

the callback:
#creating callbacks for patient space and DSI click (to show distribution of the DSI along patients)
@app.callback(Output(‘distributions’, ‘children’), [Input(‘fpbutton’, ‘n_clicks’)],
[State(‘fpbutton_clicked’,‘children’)])
def on_click(n_clicks,state):
#global distributions
if n_clicks is not None:
print('state ',state)

I see the div changing in the browser but the state is always ‘hola’, the initial declaration.
Why?
Thanks!

This way of updating HTML parameters isn’t supported. We keep the representation of the tree entirely in memory and will re-render it in React, so if you change the content with query selectors then those changes won’t get propagated into Dash’s front-end.

If you need to modify the front-end’s components, I recommend creating your own Dash components in React: https://dash.plot.ly/plugins

I will do that, but at this moment I have no time. I have a lot of programmatically generated buttons, like 6000. I am strugling to find a way to detect whick input is triggered, something quite basic.

Generating all the independent possible (as you pointed out in other threads) callbacks is slowing down the app too much, not factible. I am trying to figure out how to do that, I am working on this tricky way, I am sure I will find a way to handle that, but what alternatives I have? I LOVE Dash,but that simple feature is a must…

What I am able to do:

get click ids by js
modify an input field value and pass its state to a callaback
the value is modified in the page but the callback is not triggered until I manually add an empty space (or anything else)

I will try to simulate the manual input event with js…

Could I create a dcc.Input version with react to do so? I don’t have time, I don’t know anything about react. Do you think it’s possible?

Thanks a lot!

Yeah, for now you could create your own dcc.Input that would add a value_timestamp property that would tell you when the value has changed. You could use that to determine which input has changed. Here’s how we do that with the html components. https://github.com/plotly/dash-html-components/blob/master/src/components/Div.react.js#L10-L12

You could start by looking at the existing dcc.Input component: https://github.com/plotly/dash-core-components/blob/master/src/components/Input.react.js#L30-L48 and then adding the Date.now() call in the setProps function.

We’re working on a “React for Python Devs” guide here: https://github.com/plotly/dash-docs/pull/116

Thanks a lot, your help is very useful.

I am looking at the react code. I see that there is specified onChange.
I tried to fire the callaback by calling a jQuery change over my input field.

$( ‘input’ ).change()

I understand that this should trigger the callback, but it’s not working. Do you know why?

Thanks again.