# Dash Tabs and Interval

**URL:** <https://community.plotly.com/t/dash-tabs-and-interval/17669>\
**Category:** Dash Python\
**Created:** [January 5, 2019, 10:45pm UTC](https://community.plotly.com/t/dash-tabs-and-interval/17669 "2019-01-05T22:45:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![megalodn](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@megalodn](https://community.plotly.com/u/megalodn)\
**Post date:** [January 5, 2019, 10:45pm UTC](https://community.plotly.com/t/dash-tabs-and-interval/17669/1 "2019-01-05T22:45:11Z")

</div>

Hi, I am new to Dash but absolutely love it.  
I made a monitoring dashboard with tabs. It works beautifully, but I am struggling with the automatic updating. I tried the hidden div solution and the layout gets loaded, but not updated. I am fairly new to programming and unboxing Redis would mean a lot of effort for me. What am I doing wrong? Here is the snippet of my code:

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

app.layout = html.Div([
    dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
        dcc.Tab(label='Balance', value='tab-1-example'),
        dcc.Tab(label='Market', value='tab-2-example'),
]),
dcc.Interval(
        id='interval-component',
        interval=50*1000, # in milliseconds
        n_intervals=0
    ),
html.Div(id='tabs-content-example'),
html.Div(id='intermediate-value', style={'display': 'none'})])

@app.callback(
    Output('intermediate-value', 'children'),
    [Input('interval-component', 'n')])
def clean_data(n):
    calculate the most important stuff here and pass it via json.dump

@app.callback(Output('tabs-content-example', 'children'),
          [Input('tabs-example', 'value'),
           Input('intermediate-value', 'children'),
           Input('interval-component', 'n')])
def render_content(tab, datasets, n):
    datasets = json.loads(datasets)
    do some calculation....
   if tab == 'tab-1-example':
       return (html.Div(...)

```

EDIT:

I tried with making app.layout a function, but still no refresh.

```
def serve_layout():
    return(html.Div([
        dcc.Tabs(id="tabs-example", value='tab-1-example', children=[
        dcc.Tab(label='Balance', value='tab-1-example'),
        dcc.Tab(label='Market', value='tab-2-example'),
 ]),
    dcc.Interval(
            id='interval-component',
            interval=50*1000, # in milliseconds
            n_intervals=0
        ),
    html.Div(id='tabs-content-example'),
    html.Div(id='intermediate-value', style={'display': 'none'})
 ]))
)
app.layout = serve_layout
```

---

<div class="post-metadata">

**Author:** ![megalodn](https://avatars.discourse-cdn.com/v4/letter/m/b9bd4f/32.png) [@megalodn](https://community.plotly.com/u/megalodn)\
**Post date:** [January 6, 2019, 8:48am UTC](https://community.plotly.com/t/dash-tabs-and-interval/17669/2 "2019-01-06T08:48:14Z")

</div>

I managed to solve it by doing the following:

> <https://stackoverflow.com/questions/46759218/global-variable-updated-by-and-interval-componant>