Add dynamic content to a div

#1

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

#2

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))]
...
#3

You can return html in your call back??!

2 Likes
#4

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

2 Likes
#5

@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.