Callback Gotchas & Form submit

Callback Gotchas

https://dash.plotly.com/callback-gotchas 를 읽어 보면, callback 을 등록하기전에 HTML 이 이미 로딩된 상태여야 한다. 그러나 그렇게 되기 힘든 상황이 있을 수 있다. 이때는 https://www.dash-extensions.com/sections/enrich#a-dashproxy 를 사용하자. 

import dash
import dash_bootstrap_components as dbc
from dash import Dash, html
from dash_extensions.enrich import DashProxy

# app: Dash = Dash(...)
app: Dash = DashProxy(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.FONT_AWESOME], use_pages=True)

 

위와 같이 Dash 대신에 DashProxy 를 이용해 app 을 만들면  여러가지 장점이 있다. (DashProxy 는 Dash 를 상속함)

• 동일한 파일에 고정된 ID 로 callback 을 만들어 재사용해도 동일 ID conflict 가 발생하지 않는다.
• https://www.dash-extensions.com/components/mermaid 같은 Dash extension components 를 사용할 수 있다.

https://www.dash-extensions.com/sections/enrich#a-dashproxy 에서는 DashProxy 를 사용하기 위해서, BluePrint 를 정의해야 되는 것으로 가이드하고 있는데 만들지 않으면 default BluePrint 를 내부적으로 생성해 주니 위의 코드처럼 간단히 작성해도 된다.

 

Form Submit

 dbc.Form([
         ...,
          dbc.Button("보기", id="...", type="submit", color="primary", n_clicks=0)
     ],
      action="/page",
      method="GET",
      prevent_default_on_submit=False
 )

 

submit 버튼을 눌렀을 때, /page 로 이동해, location URL 를 변경하면서 전체 page 를 refresh 하기 위해서는 prevent_default_on_submit 를 False 로 설정해야 한다. (default 값은 True 이다.)