https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • g
    Is there a way to only push a query param to the url instead of the entire url with hx-push-url?
  • m
    can you give an example?
  • s
    Hello. Question about client side validation. I have an html table that provides row level editing - very much like the example "Edit Row. The last TD on a row has: 
    hx-target="closest tr"
    hx-include="closest tr"
    hx-validate="true"
    It is working as far as my input field will turn red as the HTML 5 validation is catching my styling for 
    input:invalid
    , and as desired the hx-put is NOT triggering. However, I am not getting the browsers validation pop-up helpers. Any suggestions? I did try to wrap each input field in a form element but to no avail. Is the only way to hook into 
    htmx:validation:failed
    and show my own dialog? Thanks for any suggestions
  • g
    @mysterious-toddler-20573 Since I'm injecting htmx into a SPA the SPA has a router which is responding to url changes. In our case we're still using Hash-based routing in our spa and all non-hash prefixed routes are assumed to be json requests. with 
    hx-push-url
    if I'm making a GET request for html content that I'm injecting inside the SPA with a webcomponent I want to update the query params of the url but not the entire url. When I click "Show Inactive" I want htmx to update the url bar with 
    ?locked=true
    but I don't want it to update the entire path nuking the hash routing that Elm needs to do it's thing.
    m
    • 2
    • 8
  • d
    hi. i have a form that to build is very database intensive, therefore i'm loading it from cache; is there a way in HTMX to populate/tie together the values that would exist in a url variable with a form field? so if someone went to example.com/?color=red then Red... would automatically get selected
  • d
    by the way i seriously love htmx!
  • b
    hi, if I'm calling a REST interface via hx-get, is there a strategy for obscuring the called url? I'm thinking about a scenario where the called url contains an API token or something like that.
  • b
    You mean you're sticking authentication in the URL or GET parameters?
  • b
    https://htmx.org/events/#htmx:configRequest this is probably what you want to do
  • b
    appreciate the response, thanks! Yes, instead of a bearer token in a header, some REST setups expect the token in the URL itself. I'd rather obscure that somehow if possible. I'll read about events!
  • s
    Alrighty... here's a doozy for y'all: I'd like to make each tooth clickable in this svg: https://commons.wikimedia.org/wiki/File:Universal_Numbering_System.svg I would ideally want the details of each tooth to update a side panel with the history of that tooth. Maybe I could convert this to an image map, but svg sounds much better. One can grab a png from the commons site, or svg. Following is a codepen link. I did try a lot of things which did not work so I undid them. This has to be responsive in the end, so that's a twist. Needless to say, I don't know what I'm doing. https://codepen.io/foobazly/pen/RwBmXJp
  • r
    1. Your script syntax is incorrect, you don't need tag in codepen's JS field 2. The teeth are drawn as paths without fill. This means, that clicks are only handled, if you click on the visible border. Make sure to set 
    style="fill:white;...
    (adjust the color to your needs) for all teeth After that, you can add htmx attributes and it should work normally
  • l
    I'm looking at the infinite scroll example on https://htmx.org/examples/infinite-scroll/. But what I don't understand in this example is how the page parameter in 
    hx-get="/contacts/?page=2"
    is increased after the request when 
    hx-swap="afterend"
    . The docs says: > The last element of the results will itself contain the listener to load the next page of results, and so on. But it doesn't show how it's done, and you can't see it when opening the "Server request" page. Can anyone explain how it works?
  • o
    I think the assumption is you do that on the server-side. 
    hx-swap
    only dictates where the element you receive from the server should be swapped in (in this case - right after the element containing the htmx attributes)
  • o
    You have to handle what should be swapped in including the element that will load in more content on the server-side - the first request GET's 
    hx-get="/contacts/?page=2"
    , so in the response the last element should have 
    hx-get="/contacts/?page=3"
    , and so on, where the page number in the URL search parameters is the page number of this request +1
  • r
    At the beginning, the page states > Let's focus on the final row (or the last element of your content): and shows, how it's done
  • r
    as for the request viewer truncating content, it seems like a bug,
  • m
    i truncate the html to make it less overwhelming, but it definitely doesn't work well for that example
  • r
    Copy code
    <script src="https://unpkg.com/htmx.org/dist/ext/ws.js">
    Is there a minified version of this available anywhere that I can pull?
  • r
  • s
    So I profiled it. And it seems that it is collecting inputs for a long time. And indeed, there are potentially hundreds of form parameters. How do I go about that?
  • m
    can you post the profile?
  • b
    I had to make a simple htmx extension to make htmx handle events from svg. The reason is svg is case sensitive and HTML is not and HTMX expects to see upper case tags in the DOM, while svg standard wants lower case . At least I think that's what it was, my memory is hazy.
  • b
    Copy code
    htmx.defineExtension("fi-svghack", {
    onEvent: function(name, evt) {
        if (name == 'htmx:confirm' && evt.detail.elt.tagName == 'a' && evt.detail.triggeringEvent.type == 'click') {
            evt.detail.triggeringEvent.preventDefault()
        }
    }
})
  • b
    tada
  • b
    Without that, the browser would bail and do the full page load.
  • a
    I'm trying to find an htmx way to sort a table by clicking on the column headers. Does anyone have a working codepen I can look at?
  • a
    Can you show a full example of how to build a sortable table using your method? I'm not sure if this should go in or in the body before or after the table
  • b
    Hey guys, just joined the HTMX Discord šŸ™‚
  • b
    A question: From the docs: "Sometimes you might want to do nothing in the swap, but still perhaps trigger a client side event (see below). For this situation you can return a 204 - No Content response code, and htmx will ignore the content of the response." My problem is, when I return a 204, my HX-Trigger-After-Settle response header does not trigger. When I change I instead return a 200, it does. I can live with returning 200, but is that the expected behaviour?
1...101410151016...1146Latest