Multi-pages doesn't load when url is updated

Dash Python
1

Hello,

I’m struggling to load my dashboard layout.
The url is updated as expected when ‘submit-button’ is clicked, but the dashboard layout doesn’t load unless I manually refresh the page…

If it can help, the print section in the callback update_table when the submit button is clicked with a valid address gives:
href: http://127.0.0.1:8050/dashboard?wallet=*some_valide_address*
pathname: /
False

and on refresh:
href: http://127.0.0.1:8050/dashboard?wallet=*some_valide_address*
pathname: /dashboard
True

Here is the code:

app.py

from dash import dcc, html, Dash, page_container


# Initialize the app
app = Dash(__name__, use_pages=True, suppress_callback_exceptions=True)

app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Store(id='cache', storage_type='session'),
    html.Div([page_container], id='page-content'),
])


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

home.py

import dash
from dash import html, dcc, callback, dash_table
from dash.dependencies import Input, Output, State

from wallet import Wallet


dash.register_page(__name__, path='/')

layout = html.Div([
    html.H1('Analyse wallet', id='h1-mainpage'),
    dcc.Input(id='address-input', type='text', placeholder='Enter wallet address'),
    html.Button('Submit', id='submit-button', n_clicks=0),
], id='home-card')


@callback(
    Output('url', 'href'),
    [Input('submit-button', 'n_clicks')],
    [State('address-input', 'value')]
)
def update_url(n_clicks, value):
    if value and n_clicks > 0:
        wallet = Wallet(value)
        if wallet.is_valid:
            return '/dashboard?wallet=' + wallet.address
    else:
        return '/'

dashboard.py

import dash
from dash import html, dash_table, callback, dcc
from dash.dependencies import Input, Output, State
from etherscan import get_transactions
from urllib import parse

from wallet import Wallet
from constants import *


dash.register_page(__name__, path='/dashboard')

layout = html.Div([
    html.H1('Transaction History', id='h1-dashboard'),
    dash_table.DataTable(id='dashboard-table')
], id='dashboard-card')


@callback(
    Output('dashboard-table', 'data'),
    Output('dashboard-table', 'columns'),
    Output('cache', 'data'),
    [Input('url', 'href')],
    [Input('url', 'pathname')],
    [State('cache', 'data')]
)
def update_table(href, pathname, cache):
    print(' ')
    print('href: ' + href)
    print('pathname: ' + pathname)
    print(pathname == '/dashboard')
    print(' ')
    if pathname == '/dashboard':
        queries_url = dict(parse.parse_qsl(parse.urlsplit(href).query))
        wallet = Wallet(queries_url['wallet'])
        if wallet.is_valid:
            if not cache:
                cache = {}
            df, cache = get_transactions(wallet.address, API_KEY, cache)
            if not df.empty:
                columns = [{"name": i, "id": i} for i in df.columns]
                data = df.to_dict('records')
                return data, columns, cache
    return [], [], cache
2

Hi @Lukosh and welcome to the Dash community :slightly_smiling_face:

Be sure you are using Dash>=2.9.2 and use:

dcc.Location(id='url', refresh="callback-nav"),

For more info, see:

3

Thank you, it works perfectly!
I use 2.11.1, but I wasn’t aware that “callback-nav” was a possible value for refresh argument

1 Like