https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • g
    option 2, use hx-vals and put some json
  • g
    (sorry for the not-html)
  • g
    hm im not sure if that answers my question -- my pagination is working fine, and my action button is working fine. But when I click my action button the 
    page
    parameter doesn't come with it because its in the GET queryParams
  • g
    i could try to render the 
    page
    parameter into 
    hx-vals
    when i render the table, but that's not going to scale well because later i also plan to add a filter form (so I'd have to add every populated field into the 
    hx-vals
    )
  • g
    🤷‍♂️
  • g
    probably that would be what I would do
  • g
    it needs to make it into the html somehow to loop back through afaik
  • g
    feels like i should be able to add it to my request using 
    beforeRequest
    but its not working as expected
  • g
    Copy code
    javascript
            $(document).on('htmx:beforeRequest', function(event){
                const queryParams = new URLSearchParams(window.location.search);
                for (const [key, value] of queryParams){
                    event.detail.requestConfig.parameters[key] = value;
                }
                console.log(event.detail.requestConfig.parameters);
            });
  • g
    you might. but that scales worse
  • g
    not really -- this scales well because it generically adds ALL query params to the request
  • g
    since now you have global behavior that is for one component leaking
  • g
    right but is that what you want?
  • g
    yeah it is, for this page
  • g
    do you want it for every page?
  • g
    no, but this project is SSR so each page has it's own JS
  • g
    actually hang on... the above code might be working after all 🤔
  • g
    then i'd say its whatever you think. you are allowed all manner of evils so long as it stays in its box
  • g
    lol
  • s
    So, I'm playing around with a server that serves up HTML snippets based on types. This works great, but I'm in a bit of a pickle with an overlay feature I've made. Basically you can click something and it will show up in a container that shows over the page with a transparent black background. This also works fine, but I want to have the overlay close when you click outside the shown content. I had 
    onclick="event.target.remove()"
    , which worked for removing the overlay. But I also want to update the original unit, but I can't just add a hx-get because the onclick shadows it.
  • s
    So basically my question is, how can I execute a tiny piece of JavaScript along with the HTMX requests
  • s
    Hmm, I guess I can trigger the deletion via a custom event and the HX-TRIGGER header..
  • s
    I tried using a OOB swap to remove the overlay, but since the server is based around types it gets a bit clunky to sometimes send an OOB swap for a type and sometimes not..
  • s
    Aha, got it. I can use 
    htmx.trigger()
    from the onclick to trigger the request!
  • r
    Nice one; yeah 
    hx-trigger
    can listen for any JS event.
  • s
    I was actually surprised that there's no "deleted" or "removed" event in JS
  • s
    That was my first idea
  • m
  • s
    Hmm, interesting. This has some overlap with what I'm trying to achieve with my type-based server. Essentially it marries the two concepts, you will always get the same type returned from an endpoint, but by changing your "Accept" header you can choose whether you want the representation to be JSON or HTML for example. This means that you could either write your own client using the server as a JSON endpoint, or you could just visit the site and through HTML/X it is a fully fledged website.
  • b
    In the hypermedia.systems book, they kind of advise against serving json and html from the same urls.
1...100010011002...1146Latest