title: callback functions based on modal popup data not working (dash)
body: <p>I am new to dash and am having trouble with writing a more complex callback function. The steps to my app are:</p>
  <ol>
  <li>press a button to open a modal popup.</li>
  <li>select options from a drop-down on the popup, which changes input options.</li>
  <li>choose the desired input options</li>
  <li>click a &quot;submit&quot; button to print (ultimately write) the input data.</li>
  </ol>
  <p>I suspect I need either pattern matching callbacks, or chained callbacks because the errors I get say:</p>
  <p>&quot;Attempting to connect a callback Input item to component:
  &quot;id&quot;
  but no components with that id exist in the layout.&quot;</p>
  <p>This is because the inputs don't appear until the modal popup and drop-down are activated.</p>
  <p>Below is a minimal example with all the important layout features and should run on any machine. <strong>I specifically need help getting the last callback in the proper format to print the selected data from the modal drop-down.</strong></p>
  <p>Thanks!</p>
  <pre><code>import time
  import dash
  import dash_core_components as dcc
  import dash_html_components as html
  from dash.dependencies import Input, Output, State
  import dash_bootstrap_components as dbc
  from dash_bootstrap_templates import load_figure_template
  
  ################################################################################################
  
  app = dash.Dash(external_stylesheets=[dbc.themes.CERULEAN]) 
  
  report_list = [
      {&quot;label&quot;: &quot;drop down 1&quot;, &quot;value&quot;: 1}, 
      {&quot;label&quot;: &quot;drop down 2&quot;, &quot;value&quot;: 2},
      ]
  
  body1 = html.Div([
      html.H6(
          &quot;Enter value (required)&quot;
      ),
      dcc.Input(
          id = 'report-1',
          type = 'text',
          placeholder = &quot;value&quot;,
          debounce=True,
          required=True,
          ),
      html.Div(html.Br(),),
      html.H6(
          &quot;Choose a new reach type (required)&quot;
      ),
      dcc.RadioItems(
          id = 'type_radio',
          options=[
          {'label':'radio1','value':1},
          {'label':'radio2', 'value':2},], 
          className='btn-group-vertical p-2'),
  ])
  
  body2 = html.Div([
      html.H6(
          &quot;Enter value (required)&quot;,
      ),
      dcc.Input(
          id = 'report-2',
          type = 'text',
          placeholder = &quot;value&quot;,
          debounce=True,
          required=True,
          ),
      html.Div(html.Br(),),
      html.H6(
          &quot;Input 1 (required)&quot;,
      ),
      dcc.Input(
          id = 'input1',
          type = 'text',
          placeholder = &quot;input 1&quot;,
          debounce=True,
          required=True,
          ),
      html.Div(html.Br(),),
      html.H6(
          &quot;Input 2 (required)&quot;),
      dcc.Input(
          id = 'input2',
          type = 'text',
          placeholder = &quot;input 2&quot;,
          debounce=True,
          required=True,
          ),
  ])
  
  ################################################################################################
  
  report_overlay = dbc.Modal(
      [
          dbc.ModalBody(
              html.Div(children=[
                  html.Div([
                      'Description...'], 
                      id=&quot;report-md&quot;),
                  html.Div([
                      html.H5([
                      'Choose an option:'
                      ]),
                  ]),
                  html.Div([
                      dcc.Dropdown(
                          id='Report_DropBox',
                          options=report_list,
                          style={
                              # &quot;textAlign&quot;:&quot;center&quot;, 
                              &quot;width&quot;:&quot;60%&quot;,
                          }
                      ),
                  ]),
                  html.Div([html.Br()]),
                  html.Div(id='report-options'), #different options for reporting a reach. 
                  html.Div([html.Br()]),
                  html.Div([
                      dbc.Button(
                      &quot;Submit&quot;,
                      id=&quot;report-submit&quot;,
                      outline=False,
                      color=&quot;secondary&quot;,
                      size=&quot;sm&quot;,
                      style={
                          &quot;textTransform&quot;: &quot;none&quot;,
                          &quot;width&quot;:&quot;30%&quot;
                          },
                      ),
                  ]),
              ],
              ),
          ), 
          html.Div([html.Br()]),
          html.Div(
              id='submit_status', 
              style={&quot;textAlign&quot;:&quot;center&quot;, &quot;width&quot;:&quot;50%&quot;}), #print status of submission.    
          html.Div([html.Br()]), 
          dbc.ModalFooter(
              dbc.Button(
                  &quot;Close&quot;, 
                  id=&quot;report-close&quot;, 
                  className=&quot;howto-bn&quot;
                  )),
      ],
      id=&quot;report-modal&quot;,
      size=&quot;lg&quot;,
  )
  
  ################################################################################################
  
  app.layout = html.Div([
          html.Br(),
          dbc.Button(
              &quot;Report Reach&quot;,
              id=&quot;report-open&quot;,
              outline=False,
              color=&quot;red&quot;, 
              style={
                  # &quot;textTransform&quot;: &quot;none&quot;,
                  &quot;margin-right&quot;: &quot;5px&quot;,
                  &quot;color&quot;:&quot;white&quot;,
                  &quot;background-color&quot;:&quot;#C42828&quot;,
                  &quot;textAlign&quot;:&quot;center&quot;,
                  },
          ),
          report_overlay,
      ],style={&quot;textAlign&quot;:&quot;center&quot;},
  )
  
  ################################################################################################
  
  ##### callbacks
  # Callback for modal popup
  @app.callback(
      Output(&quot;report-modal&quot;, &quot;is_open&quot;),
      [Input(&quot;report-open&quot;, &quot;n_clicks&quot;), Input(&quot;report-close&quot;, &quot;n_clicks&quot;)],
      [State(&quot;report-modal&quot;, &quot;is_open&quot;)],
  )
  def toggle_modal(n3, n4, is_open):
      if n3 or n4:
          return not is_open
      return is_open
  
  # Callback for different layouts based on drop down. 
  @app.callback(Output('report-options', 'children'),
                Input('Report_DropBox', 'value'))
  def render_content(report):
      if report == 1:
          return body1
      if report == 2:
          return body2
  
  #attempted callback to print data based on modal input. 
  @app.callback(
      Output(&quot;submit_status&quot;, &quot;children&quot;),
      [
          Input(&quot;Report_DropBox&quot;, &quot;value&quot;), 
          Input(&quot;report-1&quot;, &quot;value&quot;),
          Input(&quot;report-2&quot;, &quot;value&quot;),
          Input(&quot;type_radio&quot;, &quot;value&quot;),
          Input(&quot;input1&quot;, &quot;value&quot;),
          Input(&quot;input2&quot;, &quot;value&quot;),
          Input(&quot;report-submit&quot;,&quot;n_clicks&quot;)
      ],
  
  )
  def print_report(dropbox, r1, r2, type, ip1, ip2, submit):
      if submit:
          if dropbox == 1:
              r = r1
              data = type
              date_stamp = time.strftime(&quot;%d-%b-%Y %H:%M:%S&quot;, time.gmtime())
              List = [r,data,date_stamp]
              statement = html.Div([List])
  
          elif dropbox == 2:
              r = r2
              data1 = ip1
              data2 = ip2
              date_stamp = time.strftime(&quot;%d-%b-%Y %H:%M:%S&quot;, time.gmtime())
              List = [r,data1,data2,date_stamp]
              statement = html.Div([List])
              
      return statement
  
  if __name__ == '__main__':
      app.run_server(debug=True) 
  </code></pre>