Problem in same text box for output and input value

Dash Python
1

Hi all , I am trying to put a text that may show some value or it may input value depending upon the situation in the text box.
I have written a code in which the text-box is not displaying which i have mentioned in the callback

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

import pandas as pd
from jira import JIRA

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
dcc.Input(id=‘input-1-state’, type=‘text’, value=’’),
html.Br(),
html.Br(),
html.Button(id=‘submit-button’, n_clicks=0, children=‘Submit’),
html.Div(id=‘area’,children=[dcc.Textarea(id=“output-textarea1”,placeholder=’’,value=‘11111’,style={‘width’: ‘100%’})]),
dcc.Textarea(id=“output-textarea2”,placeholder=’’,value=‘2222222’,style={‘width’: ‘100%’}),

dcc.Textarea(id=“output-textarea”,placeholder=’’,value=’’,style={‘width’: ‘100%’})

])

@app.callback(#dash.dependencies.Output(‘textarea’, ‘value’),
dash.dependencies.Output(‘area’, ‘children’),
[dash.dependencies.Input(‘submit-button’, ‘n_clicks’),
dash.dependencies.Input(‘input-1-state’, ‘value’)])
def update_output(n_clicks, input1):
if n_clicks > 0:
result = html.Div([dcc.Textarea(id=“output-textarea2”,placeholder=’’,value=‘hhhhhh’,style={‘width’: ‘100%’})])
return result

if name == ‘main’:
app.run_server(debug=True)

In the above code the value ‘2222222’ never display only .
this text box is appear only after i click on submit button with the value of ‘hhhhhh’.
Please let me know where i am going wrong .
And one more thing is can i place a component (like text box) in both output and input in callback ?

2

What version of Dash are you using? Uisng the latest version of Dash, I made some python-style edits that shouldn’t have influenced what happens, but is seems to work for me. I see 2222222 upon page load. However, in your callback, you need to ensure all code paths return the required parameters. You can see I added no_update in the else clause.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dash import no_update


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='input-1-state', type='text', value=''),
    html.Br(),
    html.Br(),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='area', children=[
        dcc.Textarea(id='output-textarea1', placeholder='', value='11111', style={'width': '100 %'})]),
    dcc.Textarea(id='output-textarea2', placeholder='', value='2222222', style={'width': '100 %'}),

    dcc.Textarea(id='output-textarea', placeholder='', value='', style={'width': '100 %'})
])


@app.callback(  # dash.dependencies.Output('textarea', 'value'),
    dash.dependencies.Output('area', 'children'),
    [dash.dependencies.Input('submit-button', 'n_clicks'),
     dash.dependencies.Input('input-1-state', 'value')])
def update_output(n_clicks, input1):
    if n_clicks > 0:
        result = html.Div(
            [dcc.Textarea(id='output-textarea2', placeholder='', value='hhhhhh', style={'width': '100 %'})])
        return result
    else:
        return no_update


if __name__ == '__main__':
    app.run_server(debug=True)
3

Hi @flyingcujo,

I have updated the Dash and its working now,.
Thank You.

I have one more doubt ,
Can I use same component (like text box or input ) in both output and input of the same callback ?
if not is there any way to do a component both as input and output.

Thank You.

4

You cannot have a componen’t property be both an input and output in the same callback, as this will cause an infinite loop. You can, however, have the same property be a state and an output.

5

Hi @flyingcujo ,

Thank you for the support.

1 Like