Why my callbacks need to refresh page?

Dash Python
1

I’m trying to bulld a mutil-page app,my aid is list all my views in tabs, when I click a tab,show it’s view, my app structure is :

  • index.py
  • apps
    |-- init.py
    |-- views
    ----|-- init.py
    ----|-- view1.py
    ----|-- view2.py
    .
    .
    .

But I found a problem: I have to refresh my page then the view’s callback function can be called , for example , I have a test ,the code is :

from dash.dependencies import Input,Output,State
import dash_html_components as html
import dash_core_components as dcc
from app import app

layout=html.Div([
    dcc.Dropdown(
        id='abc',
        options=[
            {'label': 'a', 'value': 'NYC'},
            {'label': 'b', 'value': 'MTL'},
            {'label': 'c', 'value': 'SF'}
        ],
    ),
    html.Div(id='show')
])

@app.callback(
    Output('show','children'),
    [Input('abc','value')]
)
def update(value):
    return 'you choose {}'.format(value)

The first time I choose the tab , I just can see the dropdown without ‘show’'s content, after I refresh my page , I can see the content ‘you choose None’.

here is my index.py

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate
from app import app
import importlib
from methods import getData


apps_list = getData.get_apps_name()


app.layout = html.Div([
    dcc.Tabs(id='apps', value=apps_list[0], children=[
        dcc.Tab(value=i, label=i) for i in apps_list
    ]),
    html.Div(id='content'),



@app.callback(
    Output('content', 'children'),
    [Input('apps', 'value')]
)
def update_content(value):
    module_list = getData.get_apps_modules(value)
    if len(module_list) > 0:
        tabs = []
        for i in module_list:
            tabs.append(
                dcc.Tab(
                    value=i,
                    label=i
                )
            )
        return html.Div([
            dcc.Tabs(
                id='modules',
                value=tabs[0].value,
                children=tabs
            ),
            html.Div(id='views-field')
        ])

@app.callback(
    Output('views-field','children'),
    [Input('modules','value')]
 )
def update_views_tab(value):
    views_list=getData.get_modules_views(value)
    if len(views_list) > 0:
        tabs=[
            dcc.Tab(
                value=i,
                label=i
            ) for i in views_list
        ]
        return html.Div([
            dcc.Tabs(
                id='views',
                value=tabs[0].value,
                children=tabs
            ),
            html.Div(id='show-views')
        ])

@app.callback(
    Output('show-views','children'),
    [Input('views','value')]
)

def show_views(value):
    val= importlib.import_module('apps.views.'+value)
    layout=val.layout
    return layout

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

Cause I decided to dynamically add views in package, I try to save views name in sql and dynamically import views by their name. All the views without callback functions can work correctly , but views contains callbacks will cause above-problem. I think my index.py have problems because run view directly generate no problems, but I don’t konw what problem is.

Wish I express it clearly and hope to get your help .