Dash - Create button to refresh page

Give Feedback | Bug report

Tags: #dash #python #button #refresh #page #stackoverflow

Author: Florent Ravenel

Last update: 2023-06-02 (Created: 2023-06-02)

Description: This notebook explains how to create a button in Dash to refresh the page.

References:

Dash Application Python Button for Refresh the Page

Input

Import libraries

In [ ]:

import os
try:
    import dash
except:
    !pip install dash --user
    import dash
try:
    import dash_bootstrap_components as dbc
except:
    !pip install dash_bootstrap_components --user
    import dash_bootstrap_components as dbc
from dash import html, dcc, Output, Input, State

Setup Variables

DASH_PORT: specify a port number for Dash

In [ ]:

DASH_PORT = 8050

Model

Initialize Dash app

In [ ]:

app = dash.Dash(
    requests_pathname_prefix=f'/user/{os.environ.get("JUPYTERHUB_USER")}/proxy/{DASH_PORT}/',
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1.0"}
    ],
)

# app = dash.Dash() if you are not in Naas

Create button to refresh page

In [ ]:

app.layout = html.Div([
    # represents the browser address bar and doesn't render anything
    dcc.Location(id='url', refresh=False),

    dcc.Link('Navigate to "/"', href='/'),

    # content will be rendered in this element
    html.Div(id='page-content')
])


@app.callback(
    Output('page-content', 'children'),
    [Input('url', 'pathname')])
def display_page(relative_pathname):
    return html.Div([
        html.H3(f'You are on page {relative_pathname}'),
        html.A(html.Button('Refresh Page'),href=relative_pathname),
    ])

Output

Generate URL and show logs

In [ ]:

if __name__ == "__main__":
    app.run_server(proxy=f"http://127.0.0.1:{DASH_PORT}::https://app.naas.ai")

In [ ]: