Page content is reset when moving to another page

Dash Python
1

Hi All,

I am creating multi-page app using dash bootstrap component. In page 2, I am using button to update the content of the page but when I am moving to another page it is going back to it original state. I need the page to be in its current state. Please find the code below and suggest me.

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [
        dcc.Location(id="url"),
        dbc.NavbarSimple(
            children=[
                dbc.NavLink("Page 1", href="/page-1", id="page-1-link"),
                dbc.NavLink("Page 2", href="/page-2", id="page-2-link"),
        dbc.DropdownMenu(
            nav=True,
            in_navbar=True,
            label="Menu",
            children=[
                dbc.DropdownMenuItem("Entry 1",href="/page-3", id="page-3-link"),
                dbc.DropdownMenuItem("Entry 2",href="/page-4", id="page-4-link"),
            ],
        )
            ],
            brand="Navbar with active links",
            color="primary",
            dark=True,
        ),
        dbc.Container(id="page-content", className="pt-4"),
    ]
)

page2_layout = html.Div([dbc.Button("Primary", color="primary", className="mr-1",id = 'gen_text'),
                         html.Br(),
                         html.Div(id = 'texting')])
# this callback uses the current pathname to set the active state of the
# corresponding nav link to true, allowing users to tell see page they are on
@app.callback(
    [Output(f"page-{i}-link", "active") for i in range(1, 5)],
    [Input("url", "pathname")],
)
def toggle_active_links(pathname):
    if pathname == "/":
        # Treat page 1 as the homepage / index
        return True, False, False,False
    return [pathname == f"/page-{i}" for i in range(1, 5)]


@app.callback(Output("page-content", "children"), [Input("url", "pathname")])
def render_page_content(pathname):
    if pathname in ["/", "/page-1"]:
        return html.P("This is the content of page 1!")
    elif pathname == "/page-2":
        return page2_layout
    elif pathname == "/page-3":
        return html.P("Oh cool, this is page 3!")
    elif pathname == "/page-4":
        return html.P("Oh cool, this is page 4!")
    
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )

@app.callback(Output('texting', 'children'),
              [Input('gen_text', 'n_clicks')])
def create_cluster(n_clicks):
    if n_clicks is None:
        raise PreventUpdate        
    if n_clicks == 1:
        return 'Button has clicked'

if __name__ == "__main__":
    app.run_server()
1 Like
2

@tcbegley Can you please help me here?