title: Handling dash callback of an input inside the multi Tab app
body: <p>I am trying to build a multi tab dash application based on the reference code from <a href="https://dash-bootstrap-components.opensource.faculty.ai/examples/graphs-in-tabs/#sourceCode" rel="nofollow noreferrer">https://dash-bootstrap-components.opensource.faculty.ai/examples/graphs-in-tabs/#sourceCode</a></p>
  <p>My requirement is to have the Button inside the Histogram Tab page instead on the Main page. I have modified the reference code to achieve this. Below is the modified code.</p>
  <p>Commented out from app.layout and Moved dbc.Button inside the Tab as the first column (Callback modification):</p>
  <pre><code>@app.callback(
      Output(&quot;tab-content&quot;, &quot;children&quot;),
      [Input(&quot;tabs&quot;, &quot;active_tab&quot;), Input(&quot;store&quot;, &quot;data&quot;)],
  )
  def render_tab_content(active_tab, data):
      &quot;&quot;&quot;
      This callback takes the 'active_tab' property as input, as well as the
      stored graphs, and renders the tab content depending on what the value of
      'active_tab' is.
      &quot;&quot;&quot;
      if active_tab and data is not None:
          if active_tab == &quot;scatter&quot;:
              return dcc.Graph(figure=data[&quot;scatter&quot;])
          elif active_tab == &quot;histogram&quot;:
                  return dbc.Row(
                      [
                   #Modified to add the Button inside the Tab
                          dbc.Col(dbc.Button(
                          &quot;Regenerate graphs&quot;,
                          color=&quot;primary&quot;,
                          block=True,
                          id=&quot;iButton&quot;,
                          className=&quot;mb-3&quot;,
                          ), width=4
                      ),
                      dbc.Col(dcc.Graph(figure=data[&quot;hist_1&quot;]), width=4),
                      dbc.Col(dcc.Graph(figure=data[&quot;hist_2&quot;]), width=4),
                  ]
              )
      return &quot;No tab selected&quot;
  </code></pre>
  <p>2nd change is as below, updated the iButton as input in the callback:</p>
  <pre><code>@app.callback(Output(&quot;store&quot;, &quot;data&quot;), [Input(&quot;iButton&quot;, &quot;n_clicks&quot;)])
  def generate_graphs(n):
  </code></pre>
  <p>With this change, exception is raised when the application is run</p>
  <pre><code>ID not found in layout
  
  Attempting to connect a callback Input item to component:
    &quot;iButton&quot;
  but no components with that id exist in the layout.
  </code></pre>
  <p>I am not sure how to handle the Button behaviour when inside the Tab.</p>