Add the tag h2 with the text Page Number when it's updated on Infinite Scroll

Phoenix Forum Questions / Help
, ,
1

I am doing the course Phoenix Live View Studio and I am trying to add a tag <h2> when it’s updated the Hooks.InfiniteScroll.
I add this html code on the render function:

 def render(assigns) do
    ~L"""
    <div id="infinite-scroll">
      <h1>Pizza Lovers Timeline</h1>
      <div id="orders" phx-update="append">
        <%= for order <- @orders do %>
          <div class="order" id="<%= order.id %>">
            <div class="id">
              <%= order.id %>
            </div>
            <div>
              <div class="pizza">
                <%= order.pizza %>
              </div>
              <div>
                ordered_by
                <span class="username">
                  <%= order.username %>
                </span>
              </div>
            </div>
          </div>
          
          <%= if @page > 1 do %>
            <div id="page-number">
            </div>
          <% end %>
          
        <% end %>
      </div>

      <div id="footer"
           phx-hook="InfiniteScroll"
           data-page-number="<%= @page %>">
       <div class="loader">
          Load More...
       </div>
    </div>
    """
  end

and in the Hooks.infiniteScroll:

...

  updated() {
    const pageNumber = this.el.dataset.pageNumber
    console.log("updated", pageNumber)

    let h2 = document.createElement('h2')
    let text = document.createTextNode(`Page Number ${pageNumber}`)  
    h2.appendChild(text)

    let divpageNumber = document.querySelector("#orders #page-number")
    divpageNumber.appendChild(h2)

  },
...

I don’t know how to fix, can anyone help me with this?
I just want to show the Number of pages when each time updates the hooks.

2

The phoenix code looks good!

Try setting a class on the created element and then removing elements with that class before adding the new one.

Then a bit of CSS to affix the H2 to the top of the page should do it so you can see it always in the same place.

I’m not sure how particular the forum is about it, but this is really more of a Javascript related question than Phoenix.

Also a caveat to that is the page number wont update if you scroll back up. It will stay as the most recent page you loaded.

3

Yes I understand, my intentation was to show the number of the pages each time it updates and append the value of the <h2>.
I was thinking it will be better to show the value on a float right nav. But how you told me if I scroll back up don’t updates this.
It will need to code with the observer. I am right now just continuing the course and this sample don’t matter anymore.
Thank you for reply @dbaer, and maybe in the future I will try to do what you told me.