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

Two callbacks same input button - registration problem

Hello Plotly Community!

I have a button input for two different callbacks:

@app.callback(
                Output('weight-graph','figure'),
                [Input('card-button','n_clicks')],
                [State('card-input-weight','value')])

def update_graph_weight(n_clicks,weight):

    if n_clicks and weight:


        user = WEIGHT(weight)
        db.session.add(user)
        db.session.commit()

    query = WEIGHT.query.with_entities(WEIGHT.weight_val).all()
    weights = [i[0] for i in query]

    figure = {'data':[

            go.Scatter(y=weights,mode="lines"),

        ],'layout':go.Layout(
                    xaxis = dict(showgrid=False,showticklabels=False,zeroline=False),
                    yaxis = dict(title='WEIGHT',showgrid=False,showline=False),
                    hovermode='closest',
                    template = "plotly_white",
                    height=300
        )}

    return figure


@app.callback(Output('curr-weight','children'),
                [Input('card-button','n_clicks')],
                [State('card-input-weight','value')])
def smart_diet_currweight(n_clicks, value):

    first_weight = WEIGHT.query.with_entities(WEIGHT.weight_val).all()[0][0]
    last_weight = WEIGHT.query.with_entities(WEIGHT.weight_val).all()[-1][0]
    progress = last_weight - first_weight

    children = html.Div([


                            html.P("Current Weight"),
                            html.H4(f"{last_weight} KG"),
                            html.P("Progress"),
                            html.H4(f"{progress} KG")

                                        ])
    return children

My problem is that I have to press the Button that triggers the state twice or refresh the page in order for the second callback to show up. On the first press the first callback (weight-graph) triggers and on the second press the html tags from the second callbacks show up. Can I fix this somehow fix this somehow that triggering n_click once triggers both callbacks?

What I tryed is combing both callbacks into one with two outputs. doing that both componets don’t refresh until I restart the server.

initial layout for the component that doesn’t refresh until I press button/n_clicks twice or refresh the page:

            dbc.Col(html.Div(id='curr-weight',

                children = [

            ],style=style),md={'size':8}),

I have figured out what my problem is (I think) but I don’t know how to fix this.

When I trigger the input button and both callbacks are activated I add and query the database in one and only query the database in the other callback at the same time.

Because of that my callback where I only query the database (see update_graph_weight in picture) is always one database entry behind the graph because it didn’t capture the database entry in the other callback.

Could this be the problem and if yes, does someone know how I can fix that?