How to populate children with a function's return?

Dash Python
1

I am attempting to create an initial layout that consists of a login screen. Once logged in, the children main Div of the layout is the updated with app_layout2.

The code below throws an error after clicking the submit button to log in:

The callback for `<Output `main_div.children`>` returned a value having type `function` which is not JSON serializable.

How do I return app_layout2 into the children of main_div?

import dash
from dash import Input, Output, State
from dash.exceptions import PreventUpdate
from dash import html, dcc
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, prevent_initial_callbacks=True)

app.layout = html.Div([
    dbc.Input(id='username', placeholder="username"),
    dbc.Input(id='password', placeholder="password"),
    dbc.Button('submit', id='button')
    ], id='main_div')


def app_layout2():
    return html.Div([
        dbc.Row([
            dbc.Col([
                dcc.Dropdown(['a', 'b'], id = 'test2'),
                dcc.Dropdown(['c', 'd'], id = 'test1'),
                dbc.Input(id='input1'),
                dbc.Input(id = 'input2'),
                dcc.Dropdown(['e', 'f'], id = 'test3')
            ])
        ])
    ])


@app.callback(
    Output('main_div', 'children'),
    Input('button', 'n_clicks'),
    State('username', 'value'),
)
def upload_template(n_clicks, username):
    if n_clicks:
        return app_layout2
    else:
        raise PreventUpdate

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

Hi @anarchocaps

You are returning the function object instead of the result of the function. Just change return app_layout2 to return app_layout2().

1 Like