Add dynamic content to a div

Hello,
i’m trying to develop an infinite scrolling on a search results.
I’ve got a Div with the first 10 result and i want to append the next result within it but (without using React only with Python) it seems impossibile :frowning:

Please, someone can help me?
Tnx a lot

Use the State as one of the input parameters. Append the new data to the current state’s data and return that. Something like:

...

app.layout=html.Div(
    id='output',
    children=[
        html.Div("Thing 1")
    ],
    html.Button("Load more",id='load-new-content',n_clicks=0)
)

@app.callback(
    Output('output','children'),
    [Input('load-new-content','n_clicks')],
    [State('output','children')])
def more_output(n_clicks,old_output):
    if n_clicks==0:
        raise PreventUpdate
    return old_output + [html.Div('Thing {}'.format(n_clicks))]
...
2 Likes

You can return html in your call back??!

3 Likes

Hello @russellthehippo, i tried your solution and it works perfectly! :clap:
Thank you very much

2 Likes

@bas999 glad I could help.

@leuls You definitely can! You can even create whole new components with new IDs and everything…very useful for dynamic layouts.

Is there a way to apply this to my use case? I’m guessing there is; just not sure what is the best Dash practice. This is what I have: Updating part of the layout incrementally while fetching data from an external API

This certainly works for your use case. Incrementally add each additional piece of data to the hidden div children and then listen to the hidden div’s children to update the information in the table.

Generally I don’t like using hidden divs, i prefer some kind of backend object on disk etc. so I can maintain state or observe what happens. But it certainly works.

That’s the question - how to do it incrementally? I’ve just implemented your “Load more” button solution and it works great, but I don’t know how to move from a user-triggered “Load more” to silent loading of pieces of data. What triggers the callback?

Is there a way to do it without a button, say, on scrolling to the bottom automatically?