https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • https://htmx.org/attributes/hx-select-oob/ It is not clear from this example (or the documentation) that the format of `hx-select-oob` needs to be a comma separated list of ids without `#` and without spaces. On my machine, `hx-select-oob="#id_one, #id_two"` fails, as does `hx-select-oob="id_one, id_two"`; the correct format seems to be `hx-select-oob="id_one,id_two"` Personally, I feel like it should accept the first option (`#` + spaces), since that's most in line with `hx-select`. Should I open a GH issue for this?
    w
    https://htmx.org/attributes/hx-select-oob/ It is not clear from this example (or the documentation) that the format of 
    hx-select-oob
    needs to be a comma separated list of ids without 
    #
    and without spaces. On my machine, 
    hx-select-oob="#id_one, #id_two"
    fails, as does `hx-select-oob="id_one, id_two"`; the correct format seems to be 
    hx-select-oob="id_one,id_two"
    Personally, I feel like it should accept the first option (
    #
    + spaces), since that's most in line with 
    hx-select
    . Should I open a GH issue for this?
  • that seems like a bug
    m
    that seems like a bug
  • I also want to support a leading `<` and trailing `/>` to keep syntax similar to htmx
    m
    I also want to support a leading 
    <
    and trailing 
    />
    to keep syntax similar to htmx
  • Hello everyone! I'm a beginner with htmx trying to play around, and I have a question regarding triggering events with the HX-Trigger response header, custom data associated with the event, and using hx-trigger"mycustomevent from:body" on an element: Is it possible to be able to access the custom data from the event within the request that subsequently gets triggered? Or if I use the hx-trigger attribute i'm forced to ignore the custom data?
    b
    Hello everyone! I'm a beginner with htmx trying to play around, and I have a question regarding triggering events with the HX-Trigger response header, custom data associated with the event, and using hx-trigger"mycustomevent from:body" on an element: Is it possible to be able to access the custom data from the event within the request that subsequently gets triggered? Or if I use the hx-trigger attribute i'm forced to ignore the custom data?
  • what are you trying to do with the data?
    m
    what are you trying to do with the data?
  • You can access it for filtering purposes, but if you are doing anything more elaborate you should use an event handler of some flavor (vanillajs, alpine, hyperscript, etc.)
    m
    You can access it for filtering purposes, but if you are doing anything more elaborate you should use an event handler of some flavor (vanillajs, alpine, hyperscript, etc.)
  • yeah, it was for filtering
    b
    yeah, it was for filtering
  • ideally, using it as a query parameter or including it in the request somewhere for the triggered element
    b
    ideally, using it as a query parameter or including it in the request somewhere for the triggered element
  • if you are filtering, you can use an event filter and refer to the argument by name: ```html <div hx-trigger="my-custom-event[someProp == true]" ... ```
    m
    if you are filtering, you can use an event filter and refer to the argument by name:
    Copy code
    html
  <div hx-trigger="my-custom-event[someProp == true]"
       ...
  • if you want to pass the information on in the request, you'll need to write a custom event handler
    m
    if you want to pass the information on in the request, you'll need to write a custom event handler
  • ah, I see
    b
    ah, I see
  • but I wouldn't be able to do something like change the hx-get url to include a parameter based on the event, or even have different urls on the element based on the event... looks like a custom event handler is the way to go
    b
    but I wouldn't be able to do something like change the hx-get url to include a parameter based on the event, or even have different urls on the element based on the event... looks like a custom event handler is the way to go
  • is it possible to use hyperscript to adjust the url that the hx-get uses on the triggering event?
    b
    is it possible to use hyperscript to adjust the url that the hx-get uses on the triggering event?
  • One sec, lemme look
    m
    One sec, lemme look
  • Yeah, OK
    m
    Yeah, OK
  • so, if you catch the `htmx:configRequest` there will be a detail field, `evt.detail.triggeringEvent` that should hold the event that triggers the request in it. You can get the `detail` for _that_ event and then update the url in the configRequest event something like this: ```js htmx.on("htmx:configRequest", function(evt) { if(evt.detail.triggeringEvent.type === "myCustomEvent"){ evt.detail.url = evt.detail.triggeringEvent.detail.someCustomField; } }); ```
    m
    so, if you catch the 
    htmx:configRequest
    there will be a detail field, 
    evt.detail.triggeringEvent
    that should hold the event that triggers the request in it. You can get the 
    detail
    for that event and then update the url in the configRequest event something like this:
    Copy code
    js
  htmx.on("htmx:configRequest", function(evt) {
    if(evt.detail.triggeringEvent.type === "myCustomEvent"){
        evt.detail.url = evt.detail.triggeringEvent.detail.someCustomField; 
    }
  });
  • a little confusing, since there are two events, the `configRequest` event and the triggering event, but that will let you pass some context through to the request
    m
    a little confusing, since there are two events, the 
    configRequest
    event and the triggering event, but that will let you pass some context through to the request
  • that's cool though, I'll give it a shot!
    b
    that's cool though, I'll give it a shot!
  • thanks!
    b
    thanks!
  • How one would approach building a large table? 5000 rows for example, it is sluggish and requires some sort of lazy rendering/row virtualization
    s
    How one would approach building a large table? 5000 rows for example, it is sluggish and requires some sort of lazy rendering/row virtualization
  • 5000 rows in what context?
    m
    5000 rows in what context?
  • Just 5000 <tr> elements in a <table>
    s
    Just 5000 elements in a
  • Are you swapping them in one by one? Or just slamming a big table in?
    m
    Are you swapping them in one by one? Or just slamming a big table in?
  • Not even mentioning any scripting, just plain html is slow when there are so many rows
    s
    Not even mentioning any scripting, just plain html is slow when there are so many rows
  • 🙂 You may be pushing the browser a bit too hard, is paging an option?
    m
    🙂 You may be pushing the browser a bit too hard, is paging an option?
  • No, paging not an option
    s
    No, paging not an option
  • People usually use lazy rendering in this case. Just rendering a "visible window" of rows, when a user scrolls down, removing top rows and rendering bottom rows
    s
    People usually use lazy rendering in this case. Just rendering a "visible window" of rows, when a user scrolls down, removing top rows and rendering bottom rows
  • ah, a dynamic table
    m
    ah, a dynamic table
  • This way the actual rendered rows are just for visible portion
    s
    This way the actual rendered rows are just for visible portion
  • Well, we have lazy load, but a fully dynamic scroll-both-ways table seems like it would need some careful event management
    m
    Well, we have lazy load, but a fully dynamic scroll-both-ways table seems like it would need some careful event management
1...108610871088...1146Latest