https://htmx.org logo
Powered by
# htmx-general
  • b
    I can put "More" button outside page 3 but then how can htmx know which page to load next ?
  • g
    Yes. The button should be outside of the “page 1” content, then use swap outerHTML to replace itself with the contents of “page 2”, etc.
  • g
    @boundless-bird-75885
  • b
    oh, I got it now. Thank you so much
  • b
    Here is something more challenge: The next page must be inside the #container, but the Load more button must be outside the container. How can I do it?
  • g
    .
  • g
    try 
    hx-target=“#container” hx-swap=“beforeEnd”
  • g
    You may need to 
    swap-oob
    the “load more” button
  • m
    You could encode the page number as a hidden input in the #container and replace it as each page is loaded, and then include it in the load more button with hx-include. You'd keep the replacement target at the end of the #container with the embedded page number within it.
  • b
    Using data-hx-swap-oob="beforeend" will only append to the button, not the content
  • b
    So I will have something like "Load More Load More Load More"
  • b
    But the content is replaced just like innerHtml
  • b
    Thank everybody, I found out, The solution is to use hx-swap-oob together with hx-swap
  • b
    When using hx-swap-out, After the content is inserted, the browser will scroll the button to the middle of the page. I want it to scroll to the inserted the content.
  • b
    @User @User This need to handle using JS right?
  • g
    1. If you’ve just clicked the button, then the top of the new content should already be in view.
  • g
    2. If you need more, Check out https://htmx.org/attributes/hx-swap/
  • g
    It has a scroll option that should do what you need.
  • g
    But I’m not sure what the “top” and “bottom” attributes mean. If they refer to the window (not what you want) then we can make a PR that points to the container instead.
  • m
    any chance this can get blogposted?
  • b
    Do you mean walking through what I did? I'm not sure where I would begin lol. It's nothing fancy, just good classic HTMX prinicples. I'm sure I can figure out a way to generalize the experience starting with a complex view and simplifying, and write something up 😀
  • b
    htmx + django is such a great combination - some blogs/tutorials/howtos would raise a lot of attention
  • b
    It is a great combo. I can't guarantee a timeframe, but I'll work this week to create an example before and after project and walk-the-dog in a blog post on how to get from complex nightmare to a simplified, HTMX enabled output.
  • b
    in 2021 I already did three little projects at work with django, and swapping some parts I did in vanilla js (my usual combo is just to write backend in django and plain vanilla js via DRF) with htmx is definitely on my agenda
  • m
    no pressure, just if you have the time
  • n
    Did a first pass on the eslint and prettier setup for htmx. I went ahead an applied the prettier format rules and all the eslint suggestions that made sense to me. Looks like a lot of changes but it's mostly code style. It's easier to look at individual commits. Let me know if this is something that you would like to consider including. https://github.com/gcollazo/htmx/pull/1/commits
  • l
    @User @User Tried replacing the whole form today, but it still looses focus. Maybe it's a Safari issue?
  • b
    I have one small app when user enter a barcode press entery key backend return content which for two diff elements is that possible to swap html for two or more different element ???
  • b
    or any suggestion how handle it
  • m
    If the two elements need to go in different places, you can use https://htmx.org/attributes/hx-swap-oob/
1...289290291...1146Latest