Search code examples
javascripthtmlinfinite-scrollhtmx

htmx: Endless scrolling via "revealed" does not work

I want to use htmx hx-trigger="revealed" to implement endless scrolling.

I send this html to the browser. In this case Note-20 should load the next note (Note-19):

    <h1 class="">Note-20</h1>
    <p class="">foo</p>
    <div hx-get="/note/19/" hx-trigger="revealed" hx-swap="outerHTML" class=""></div>

The URL /note/19/ returns roughly the same HTML: it contains the data of Note-19 and at the end it tells the browser to load Note-18 on "revealed".

This works for the first notes. But then it stops.

What could be the reason?

Update

I create a simple demo application to show how you could use htmx with Django: django-htmx-fun

Solution

  • I found a solution: In above code the <div> which triggers the loading via hx-get is empty.

    If I add some content (for example "..."), then it works.

    I guess my browser (Chrome) does not render the empty <div> and thus the revealed event is not triggered.

    With a non-empty <div> it works.