✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

URL pathname callback not firing when loading page

Hi,

I am trying to build a multi-page Dash app using the url callback. My app called dash_apps.py looks like this:

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

server = Flask(__name__)
app = dash.Dash(
    __name__,
    server = server,
    serve_locally = False,
    requests_pathname_prefix = "/plotary/dash/",
)

app.layout = html.Div([
        html.Div([
        html.A([
            html.Div(id="logo")
        ],href='https://man-es.com'),
        html.Div([
            html.H1('Keine Auswertung ausgewählt. ')
        ],id="description"),
    ],
    id="navbar")]
)

@app.callback(Output('description', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    return html.Div([
        html.H1('Auswertung Nr {}'.format(pathname))
    ])

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

and is called through a wsgi.py that looks like this:

from dash_apps import server

if __name__ == "__main__":
    server.run()

The server I am using runs nginx and I use a web socket that starts wsgi.py with gunicorn as is explained in this post.

Now if I open for example http://<ip.to.server>/plotary/dash/18 it will just state “Keine Auswertung ausgewählt.” although I would expect it to show “Auswertung Nr. 18”. What am I missing here?

Your example does not seem to use either the dash core components Link class, or the Location class. Both of these classes seem to be the only component classes that “aid page navigation” (https://dash.plotly.com/urls).

Your code uses html.A. This component does not seem to cause Dash to invoke your callback. As well, setting the href parameter of the Link class to a public url also does not cause Dash to invoke your callback.

Using the code below, Dash seemed to invoke your callback each time I clicked on one of the 2 non-public urls.

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

# server = Flask(__name__)
# app = dash.Dash(
#     __name__,
#     server = server,
#     serve_locally = False,
#     requests_pathname_prefix = "/plotary/dash/",
# )

app = dash.Dash(__name__,url_base_pathname="/plotary/dash/")

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
        html.Div([
#         html.A([
#             html.Div(['goto man-es page'],id="logo")
#         ],href='https://man-es.com'),
        html.Div([
            html.H1('Keine Auswertung ausgewählt. ')
        ],id="description"),
        # This Link does not seem to be causing an invocation of the callback 
        dcc.Link('Navigate to https://man-es.com', href='https://man-es.com'),
        html.Br(),
        # These 2 Links DO seem to be causing an invocation of the callback 
        dcc.Link('Navigate to "/plotary/dash/"', href='/plotary/dash/'),
        html.Br(),
        dcc.Link('Navigate to "/plotary/"', href='/plotary/'),
            
    ],
    id="navbar")]
)

@app.callback(Output('description', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    print(f'entering callback for pathname {pathname}')
    return html.Div([
        html.H1('Auswertung Nr {}'.format(pathname))
    ])

if __name__ == '__main__':
    app.run_server(port=8882,debug=False)

That’s it! I was missing the location class. Thanks!