Serve_layout does not reload date on multipage app

Dash Python
1

Hi,

when using a multipage app (URL Routing and Multiple Apps | Dash for Python Documentation | Plotly), serve_layout (Live Updates | Dash for Python Documentation | Plotly) does not seem to work. Datetime is not updating, when reloading page.

app.py

import dash

app = dash.Dash(__name__, suppress_callback_exceptions=True)
server = app.server

app1.py

import dash_html_components as html
import datetime

from app import app

layout = html.H1('The time is: ' + str(datetime.datetime.now()))

index.py

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

from app import app
import app1


def serve_layout():
    return html.Div([
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content')
        ])

app.layout = serve_layout


@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/apps/app1':
        return app1.layout
    else:
        return '404'

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

I am hitting the exact same issue. Any ideas?

3

Hello @hai,

Instead of the layout being a static variable, it needs to be a function.

Otherwise it gets saved and loaded only the first time. Making it a function: def layout() will execute it upon refresh.

4

Hi @jinnyzor : That was already done, and it is still not working. If you look at the example listed in this thread:

def server_layout() is already a function.

There seems to be some bug or mystery when we try to apply the live update thing to multipage. Does this mean multipage is NOT supported to have refreshed/updated data upon page reload?

5

@hai,

The problem isn’t server_layout but with the individual layout of the page.

It should be this:

import dash_html_components as html
import datetime

from app import app

def layout():
return html.H1('The time is: ’ + str(date-time.datetime.now()))

6

@jinnyzor : I just tried this, yes this simple example is working now. need to update one more line:

return app1.layout()

But this is still not working for complex multipage app, now the callbacks inside the subpages are now behaving very strange, with error “Duplicate callback outputs” when reloading the page.

Would this be able to support callbacks inside subpages for similar mulitpage app?

7

At least one issue solved.

Yes, this should be able to work for subpages and other multi page apps.

Callbacks should be outside of functions, functions will cause it to try to reapply the callbacks. And also not apply at start up.

Do you have an MRE?

8

Thanks! That’s exactly the problem! after moving callbacks, and other embedded functions outside the main layout function in the subpage, now everything is working ok.

1 Like
9

Thanks! That’s exactly the problem! after moving callbacks, and other embedded functions outside the main layout function in the subpage, now everything is working ok.

I was facing a same problem and type a problem on google and reach here and get my solution and now everything is working nicely.

2 Likes