Mixing
Why doesn't the div content update in dash / plotly?
I tried using a div containing various elements with which the user can interact and then pass the entire div element as a State to a function to be able to read all of the various inputs.
However, it seems that the div isn't getting updated. I wrote a small programme which shows the problem below:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.css.append_css({
'external_url': ('https://stackpath.bootstrapcdn.com/'
'bootstrap/4.1.1/css/bootstrap.min.css')
})
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out')]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children')]
)
def update(n, div):
print(div) # This div always contains the string 'asdf' even if I type something else in the Input field
app.run_server(debug=True, port=8888)
I know that in this simple case I could just have the State depend on the value property of the id='inp' however each of these is generated dynamically so I thought I'd create whatever I create in the div and then pass the div and parse it (which I have code for). The only problem is I can't get the div to update!
EDIT:
There seems to be confusion as to the issue. I'm trying to get the value of the Input box through the parent div and passing the children. However, that didn't work! I've added a comment in the code to explain this.
python plotly-dash
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
add a comment |
I tried using a div containing various elements with which the user can interact and then pass the entire div element as a State to a function to be able to read all of the various inputs.
However, it seems that the div isn't getting updated. I wrote a small programme which shows the problem below:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.css.append_css({
'external_url': ('https://stackpath.bootstrapcdn.com/'
'bootstrap/4.1.1/css/bootstrap.min.css')
})
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out')]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children')]
)
def update(n, div):
print(div) # This div always contains the string 'asdf' even if I type something else in the Input field
app.run_server(debug=True, port=8888)
I know that in this simple case I could just have the State depend on the value property of the id='inp' however each of these is generated dynamically so I thought I'd create whatever I create in the div and then pass the div and parse it (which I have code for). The only problem is I can't get the div to update!
EDIT:
There seems to be confusion as to the issue. I'm trying to get the value of the Input box through the parent div and passing the children. However, that didn't work! I've added a comment in the code to explain this.
python plotly-dash
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
add a comment |
I tried using a div containing various elements with which the user can interact and then pass the entire div element as a State to a function to be able to read all of the various inputs.
However, it seems that the div isn't getting updated. I wrote a small programme which shows the problem below:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.css.append_css({
'external_url': ('https://stackpath.bootstrapcdn.com/'
'bootstrap/4.1.1/css/bootstrap.min.css')
})
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out')]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children')]
)
def update(n, div):
print(div) # This div always contains the string 'asdf' even if I type something else in the Input field
app.run_server(debug=True, port=8888)
I know that in this simple case I could just have the State depend on the value property of the id='inp' however each of these is generated dynamically so I thought I'd create whatever I create in the div and then pass the div and parse it (which I have code for). The only problem is I can't get the div to update!
EDIT:
There seems to be confusion as to the issue. I'm trying to get the value of the Input box through the parent div and passing the children. However, that didn't work! I've added a comment in the code to explain this.
python plotly-dash
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
I tried using a div containing various elements with which the user can interact and then pass the entire div element as a State to a function to be able to read all of the various inputs.
However, it seems that the div isn't getting updated. I wrote a small programme which shows the problem below:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.css.append_css({
'external_url': ('https://stackpath.bootstrapcdn.com/'
'bootstrap/4.1.1/css/bootstrap.min.css')
})
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out')]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children')]
)
def update(n, div):
print(div) # This div always contains the string 'asdf' even if I type something else in the Input field
app.run_server(debug=True, port=8888)
I know that in this simple case I could just have the State depend on the value property of the id='inp' however each of these is generated dynamically so I thought I'd create whatever I create in the div and then pass the div and parse it (which I have code for). The only problem is I can't get the div to update!
EDIT:
There seems to be confusion as to the issue. I'm trying to get the value of the Input box through the parent div and passing the children. However, that didn't work! I've added a comment in the code to explain this.
python plotly-dash
python plotly-dash
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
edited Nov 21 '18 at 0:00
evan54
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
asked Nov 20 '18 at 4:27
evan54evan54
1,72312033
1,72312033
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
This could possibly be a bug, as the 'value' property of the dcc.Input seems to revert back to default and not persist the changes to the input value. However, it appears that you can force the changes to persist by passing State('inp', 'value') as an additional input parameter to your callback function:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out', children=)]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children'),
State('inp', 'value')]
)
def update(n, div, inp):
print(div)
if __name__ == '__main__':
app.run_server()
Yields:
[{'props': {'children': 'Press me', 'id': 'btn'}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'asdf'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
Then upon changing the input and pressing the button:
[{'props': {'children': 'Press me', 'id': 'btn', 'n_clicks': 1, 'n_clicks_timestamp': 1542814708494}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'hi'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
Not sure I agree. The way it's set up it effectively returnsNonewhich for this toy example is fine. Am I missing something?
– evan54
Nov 21 '18 at 10:55
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386230%2fwhy-doesnt-the-div-content-update-in-dash-plotly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
This could possibly be a bug, as the 'value' property of the dcc.Input seems to revert back to default and not persist the changes to the input value. However, it appears that you can force the changes to persist by passing State('inp', 'value') as an additional input parameter to your callback function:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out', children=)]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children'),
State('inp', 'value')]
)
def update(n, div, inp):
print(div)
if __name__ == '__main__':
app.run_server()
Yields:
[{'props': {'children': 'Press me', 'id': 'btn'}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'asdf'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
Then upon changing the input and pressing the button:
[{'props': {'children': 'Press me', 'id': 'btn', 'n_clicks': 1, 'n_clicks_timestamp': 1542814708494}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'hi'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
Not sure I agree. The way it's set up it effectively returnsNonewhich for this toy example is fine. Am I missing something?
– evan54
Nov 21 '18 at 10:55
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
add a comment |
This could possibly be a bug, as the 'value' property of the dcc.Input seems to revert back to default and not persist the changes to the input value. However, it appears that you can force the changes to persist by passing State('inp', 'value') as an additional input parameter to your callback function:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out', children=)]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children'),
State('inp', 'value')]
)
def update(n, div, inp):
print(div)
if __name__ == '__main__':
app.run_server()
Yields:
[{'props': {'children': 'Press me', 'id': 'btn'}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'asdf'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
Then upon changing the input and pressing the button:
[{'props': {'children': 'Press me', 'id': 'btn', 'n_clicks': 1, 'n_clicks_timestamp': 1542814708494}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'hi'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
Not sure I agree. The way it's set up it effectively returnsNonewhich for this toy example is fine. Am I missing something?
– evan54
Nov 21 '18 at 10:55
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
add a comment |
This could possibly be a bug, as the 'value' property of the dcc.Input seems to revert back to default and not persist the changes to the input value. However, it appears that you can force the changes to persist by passing State('inp', 'value') as an additional input parameter to your callback function:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out', children=)]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children'),
State('inp', 'value')]
)
def update(n, div, inp):
print(div)
if __name__ == '__main__':
app.run_server()
Yields:
[{'props': {'children': 'Press me', 'id': 'btn'}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'asdf'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
Then upon changing the input and pressing the button:
[{'props': {'children': 'Press me', 'id': 'btn', 'n_clicks': 1, 'n_clicks_timestamp': 1542814708494}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'hi'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
This could possibly be a bug, as the 'value' property of the dcc.Input seems to revert back to default and not persist the changes to the input value. However, it appears that you can force the changes to persist by passing State('inp', 'value') as an additional input parameter to your callback function:
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
app = dash.Dash(__name__)
app.layout = html.Div(
className='container-fluid',
children=[
html.Div(id='test', children=[
html.Button(id='btn', children='Press me'),
dcc.Input(id='inp', value='asdf')
]),
html.Div(id='out', children=)]
)
@app.callback(
Output('out', 'children'),
[Input('btn', 'n_clicks')],
[State('test', 'children'),
State('inp', 'value')]
)
def update(n, div, inp):
print(div)
if __name__ == '__main__':
app.run_server()
Yields:
[{'props': {'children': 'Press me', 'id': 'btn'}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'asdf'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
Then upon changing the input and pressing the button:
[{'props': {'children': 'Press me', 'id': 'btn', 'n_clicks': 1, 'n_clicks_timestamp': 1542814708494}, 'type': 'Button', 'namespace': 'dash_html_components'}, {'props': {'id': 'inp', 'value': 'hi'}, 'type': 'Input', 'namespace': 'dash_core_components'}]
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
edited Nov 21 '18 at 15:41
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
answered Nov 20 '18 at 20:06
rahlf23rahlf23
5,2242630
5,2242630
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
Not sure I agree. The way it's set up it effectively returnsNonewhich for this toy example is fine. Am I missing something?
– evan54
Nov 21 '18 at 10:55
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
add a comment |
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
Not sure I agree. The way it's set up it effectively returnsNonewhich for this toy example is fine. Am I missing something?
– evan54
Nov 21 '18 at 10:55
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
I'm not actually looking to return the div, I just want to make sure I'm getting it's contents correctly
– evan54
Nov 21 '18 at 1:21
Not sure I agree. The way it's set up it effectively returns
None which for this toy example is fine. Am I missing something?– evan54
Nov 21 '18 at 10:55
Not sure I agree. The way it's set up it effectively returns
None which for this toy example is fine. Am I missing something?– evan54
Nov 21 '18 at 10:55
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think I misunderstood your issue at first, thanks for clarifying in your edit. I've updated my answer.
– rahlf23
Nov 21 '18 at 15:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
I think this is a bug related to the gotchas here dash.plot.ly/faqs
– evan54
Nov 27 '18 at 1:38
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53386230%2fwhy-doesnt-the-div-content-update-in-dash-plotly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
