Black Lives Matter. Please consider donating to Black Girls Code today.

Store Callbacks not firing

Hi all. I am trying to share data between two app pages. On the first page is a date selector, and I would like to pass that date around, use it in a function, then display the result from the function and the date on the second page.

I have found that for some reason, it is only possible to do one of these with a callback that uses the store component which holds the date. I can confirm the date is stored properly. With single outputs, I can achieve the desired behaviour, however, adding a second output results in the callback not firing at all. Below is the code:

app = dash.Dash(__name__,external_stylesheets=external_stylesheets)
server = app.server
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    # Put hidden div's in here and pass them around
    dcc.Store(id = 'appDate'),
    # These are standard multipage app requirements.
    dcc.Location(id = 'url' , refresh = False),
    html.Div(id = 'page-content'),
])

# Change Pages
@app.callback(Output('page-content', 'children'),
              [Input('url', 'pathname')])
def display_page(pathname):
    if pathname == '/Pages/page1':
        return page1.Index_layout
    elif pathname == '/Pages/page2':
        return page2.page_2_layout
    else:
        return page1.Index_layout


Index_layout = html.Div([
    # Heading
    html.H3('Index Page'),
    dcc.DatePickerSingle(
        id = 'appDate',
        min_date_allowed = curDate - timedelta(days = 14),
        max_date_allowed = curDate,
        initial_visible_month= curDate,
        date = str(object = curDate)
    ),
    html.Div(id='disp'),
    # Sub div for date picker
    html.Br(),
    dcc.Link('Go To Page 2', href='/Pages/page2'),

])

@app.callback(Output('appDate','data'),
              [Input('appDate','date')])
def storeDate(appDate):

    if appDate is not None:
        appDate = datetime.strptime(appDate.split(' ')[0],'%Y-%m-%d')
        date_string = appDate.strftime('%B %d %Y')
        #pdb.set_trace()
        return date_string
    else:
        return 'Fail'


page_2_layout = html.Div([
    html.H3('Has the date been Parsed?'),
    html.Div(id='page2content'),
    dash_table.DataTable(
        id='blotterTable',
        columns = blotCols,
        data = emp.to_dict('records'),
        editable=False,
        filter_action='native',
        sort_action='native',
        sort_mode="multi",
        row_selectable="multi",
        selected_rows=[],
        style_table={'display': 'inline-block','overflowX': 'scroll'},
        style_cell=table_cell_style,
        style_data_conditional=table_style_conditional,
        style_header=table_header_style,
        ),
    dcc.Link('Go To Index', href='/Pages/page1'),
    html.Br(),
])
################################################################################
@app.callback([Output('blotterTable','data'),
               Output('page2content','children')],
              [Input('appDate','modified_timestamp')],
              [State('appDate','data'),
               State('blotterTable','data')])
def dispDate(ts,date,blot):
    #pdb.set_trace()
    if ts is None:
        raise PreventUpdate
    blotter = getBlotter(date)# or any dataset

    return blotter,date

Hi @TomM. Sorry, can you clarify what you mean by “With single outputs, I can achieve the desired behaviour”? If you have an example of successfully sharing data - even with a single output - between 2 app pages, I’d love to see that code (it sounds like you might?). thanks!

i am facing a similar issue where when i have 2 store data props in state of a callback, the callback does not get triggered at all. although for the above case i believe your issue might have something to do with the fact that you have the same prop of a component being both input and output? isnt that supposed to go infinitely since you are always returning something and not no_update either