✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Initail callback of div element not triggred why?

Why the initial callback of div does not get triggred??


from dash import Dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
from datetime import datetime
import time

available_indicators = ['Nagpur', 'Mumbai', 'Chennai', 'Delhi', 'Agra', 'Pune']
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)

def create_pane(n):
    filter_options = []
    import time
    time.sleep(2)
    
    if n != None:
        p = n.lower()
        for i in available_indicators:
            if p[0] in i:
                filter_options.append(i)
            else:
                continue
    else:
        filter_options = available_indicators

    pane = html.Div(children=[
            dcc.Dropdown(
                id='filter',
                options=[{'label': i, 'value': i} for i in filter_options],
                value=n
            )
    ])

    return pane


app.layout = html.Div(
        [
            # html.Div(children='Agra', id="temp"),
            html.Div(children="hello", id="mock-signal"), #style={'display': 'none'}),
            html.Div(children=create_pane(None), id="mock-filterpane"),
            html.Div(children=[], id="mock-bullet-chart"),
            html.Div(dcc.Loading(debug = True,
            fullscreen=True, children=html.Div(children=[], id="mock-revenue-graph"))),
            html.Div(children=[], id="mock-revenue-map"),
        ])

@app.callback(
    [
        Output("mock-signal", "children"), 
        Output("mock-filterpane", "children")
    ],
    [Input("filter", "value")], 
    prevent_initial_call=False)
def first_callback(n):  
    print("\n\nfirst_callback triggered")
    print(n)  
    dropdown = create_pane(n)
    return ['signal', dropdown]


@app.callback(
    Output("mock-bullet-chart", "children"), 
    [
        Input("mock-signal", "children"),
        # Input("filter", "value")
    ], 
    # [State("filter", "value")], 
    prevent_initial_call=False)
# def bullet_callback(signal, value):
def bullet_callback(value):
    print("bullet_callback triggered")
    val = "Value for mock-bullet-chart is ->" + str(value)
    child = html.H3(val)
    return child

@app.callback(
    Output("mock-revenue-graph", "children"), 
    [
        # Input("mock-signal", "children"),
        Input("filter", "value")
    ], 
    # [State("filter", "value")], 
    prevent_initial_call=False)
# def graph_callback(signal, value):
def graph_callback(value):
    print("graph_callback triggered")
    import time
    time.sleep(2)
    val = "Value for mock-revenue-graph is ->" + str(value)
    child = html.H3(val)
    return child

@app.callback(
    Output("mock-revenue-map", "children"), 
    [
        # Input("mock-signal", "children"),
        Input("filter", "value")
    ], 
    # [State("filter", "value")], 
    prevent_initial_call=False)
# def map_callback(signal, value):
def map_callback(value):
    print("map_callback triggered")
    val = "Value for mock-revenue-map is ->" + str(value)
    child = html.H3(val)
    return child



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

I’m not sure if I understand your question, but you are assigning the word “signal” to the id=“mock-signal” in the first output of the callback, then the word “Hello” is replaced by “signal”

what i want to understand is why the callback of mock-signal does not triggered twice on page refresh. first due to initail callback due dash app loading and other due to first_callback(n), but when i run the above code callback is triggered due to first_callback(n) even though prevent_initial_call is set to False.

When you run the above code map_callback(value), graph_callback(value) are called twice once due to initial load of app and other due to setting of mock-signal children to “signal”, but thats not the case with bullet_callback(value) why??