https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    a good idea, would you mind putting together a PR? doc fixes can be against master: https://github.com/bigskysoftware/htmx/blob/master/www/extensions/preload.md
  • a
    even just a link to https://htmx.org/docs/#caching with "remember you need to enable caching on your server" should do it
  • v
    Some stupid question: I load a page with the proper headers and so on (with 
    <script ... htmx />
    . On the click of a button, I call a GET endpoint (say 
    GET /something?param=gg
    and I replace a div in the page with the returned div 
    <div id="imreturned">
    . Later I realized that the 
    <div id="imreturned">
    is useful apart from the main page, so I want to be able to display something meaningful on 
    http://www.mypage/something?param=gg
    without going into main page. But the issue is then I have to return the header section also on 
    /something
    endpoint. But this would cause issues with embedding this in main page right? And it feels yucky. What can I do here? Sorry if that's too long winded.
  • m
    If I understand your question correctly, it sounds like you need 2 endpoints. One that just returns the div and one that returns a full page. Some people like to use the one endpoint for that and they check the request for HTMX headers. If they find the headers they return just the div, and if they don’t they return the full page.
  • v
    ok I will try the header trick I guess first.
  • f
    Hi guys. Please help me
    Copy code
    javascript
 <script>
        function monitorVideo() {
            if ((videojs('my_video').duration() - videojs('my_video').currentTime()) < 10)
                myFunction();
        }
        function myFunction() {
           activation htmx post request
        setInterval(monitorVideo, 100);
        }
</script>
    This script check if less than 10 seconds are left before the end of the video, it starts the myFunction() how can i integrate activation htmx post request there to run it ?
  • m
    I think this is what you are after https://htmx.org/api/#ajax
  • f
    thanks
  • p
    What is the "official" capitalization for the 
    hx-swap
    attributes? At the start of the documentation page https://htmx.org/attributes/hx-swap/, 
    beforeend
    is used, but then in examples further down 
    beforeEnd
    is used. The reason for asking is that I have always used 
    beforeend
    , but the IntelliJ plugin (https://github.com/hugohomesquita/htmx-jetbrains) now has code completion that suggests 
    beforeEnd
    .
  • b
    How do y'all handle updating two parts of a page with 1 button click? I'm using hx-get/swap/target to load more results into the results container (appends), however I'd also need to re-calculate the pagination information, which is in a different section of that page.
  • s
    7
  • s
    put this in the end of the response and make sure there is a div with the same id in the page
  • s
    and it works automagically
  • b
  • b
    I'll lookup the docs on that to understand exactly, thanks!
  • b
    Ah I see, so the request should return both what I'm already doing, but also the (updated) pagination container?
  • b
    > Note that out of band elements must be in the top level of the response, and not children of the top level elements. This scares me though
  • b
    Oh nevermind
  • b
    Misread that. But I get it now
  • b
    Man, this works stupidly good. Thanks @sparse-musician-64201
  • a
    well, on the actual code I see this:
  • a
    so all lowercase seems to be the right way
  • a
    go ahead and submit a PR to fix it, please 🙂
  • b
    Using htmx in this Laravel project. I've got a 
    add-to-cart
    blade component which makes a 
    hx-post
    call to add a product to the cart. This button exists in the overview page (in a loop, button in every product card) and also on the detail page of this product. I'd want to swap this button to a 'delete' button instead. For the product page I could easily just return that fragment, but not sure how to go about this for the overview page in that loop. Any ideas?
  • b
    Easy way out seems to just 
    redirect()->back()
    in this API call, and 
    hx-swap="body"
    , but that feels pretty gross.
  • p
  • b
    Going with this method, an element on that page which has the 
    hx-swap-oob
    attribute on it disappears as well
  • b
    Fixed it with the help of 36864 by just `hx-select`'ing the shit out of it. Would still like to understand why an element with the 
    hx-swap-oob
    attribute would be removed. It is returned in the HTML response of the request.
  • w
    A solution of mine is putting "HX-Trigger"="exampleEvent" in the header of the response from the backend, it re-fires all hx requests in the body with hx-trigger="exampleEvent from:body" with them
  • w
    However it may take more server requests
1...955956957...1146Latest