Layout, but not callbacks remain working when putting layout/callback function into sidebar

Dash Python
1

Hi,

As the title says, I have code that creates a page with several tabs. The tabs contain some input data which has some small reactivity (sets attributes in a class, and renders a red box if input is incorrect). This layout/code works fine when I call just this one page from the function:
app.layout = tabs_input_page()

However when I put my tabs_input_page into a sidebar function (the callback function of the sidebar), I can still succesfully browse to the page with input_tabs, change tabs and everything, but my functionality (setting attributes, and the red box), stop working.

I don’t know why exactly this is, nor how to fix it, do you have any suggestions for why this might be happening?

The callback function (that succesfully changes pages, but does not allow for reactivity is:

def render_page_content(pathname):

    if pathname == "/":
        return [
            html.H1('Raysol home screen',
                    style={'textAlign': 'center'}),
        ] 

    elif pathname == "/Input":
        return [tabs_input_page()]


    elif pathname == "/Output":
        return [
            html.H1('Output placeholder',
                    style={'textAlign': 'center'}),
        ]
2

Fixed!!
Just a heads up for anyone else that is running into similar issues. All dash callbacks need to be defined before the app start, even if (as in my case) the pages are created dynamically on button-click. The simple fix was to just load in each page before app start, and only refer to the already created pages on button press.

This solution of course holds a lot of stuff in memory, so instead one can separate the layout and decorators: Dynamic Controls and Dynamic Output Components