https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • s
    htmx doesn't trigger 
    defineExtension
    on freshly swapped nodes. As a result, no extension works on these nodes. I found this on preload extension, but it's a bug in htmx core.
  • m
    where is the 
    definedExtension
    called?
  • w
    I have some CSS that targets form submit buttons and puts a spinner on them when the .htmx-request class is present on the button/form. It it possible to also "disable" the button using CSS? Adding some CSS such as 
    cursor: not-allowed;
    and 
    pointer-events: none;
    ? I'm not opposed to using hyperscript, just was hoping to have it all defined in one place, instead of creating a behavior and then finding all the buttons and installing it, etc. Just trying to avoid double HTMX submits. EDIT: Looks like just setting 
    pointer-events: none
    suffices and prevents future HTMX calls while the initial one is being processed, although you can't have both that and 
    cursor: not-allowed
    on the same element (although I suppose you could but the cursor css on a wrapper div).
  • s
    Copy code
    html
<head><script src="https://cdn.jsdelivr.net/npm/htmx.org@1.8.4/dist/ext/preload.js"></script></head>
    And then the script calls:
    Copy code
    javascript
htmx.defineExtension("preload", {.....
  • m
    where is the script?
  • s
    Here in head @mysterious-toddler-20573
  • w
    @some-airline-73512 I think he means, where is 
    htmx.defineExtension
    located? EDIT: I might have misunderstood. Is 
    htmx.defineExtension
    a part of 
    preload.js
    ?
  • m
    🤔
  • m
    The head should define the extension and, from there on out, it should be available
  • m
    to be used in an 
    hx-ext
    attribute
  • m
    it shouldn't need to be redefined per partial swap
  • s
    Yes, it's part of preload.js
  • s
    Yes, it's available. The extension binds to all the nodes in DOM on document ready. But when the nodes get swapped, the extension isn't getting called for those new nodes. Thus, the extension doesn't know about the swapped nodes :/
  • h
    is there a way to prefix hx-* to something else like hx_ ?
  • h
    I would like to pass hx-get as a kwarg to a component but the - makes python unhappy 😦
  • h
    data-hx-get is similar 😦
  • w
    @hundreds-camera-24900 can you not just specify it as a dictionary key? e.g., 
    {'hx-get': 'my_value'}
    ? What are you using to render HTML?
  • h
    Jinja
  • h
    I can do like
  • h
    {{mymacro(attrs={'hx-get': 'my_value'})}}
  • h
    that will work fine
  • h
    I just think it's sliiiiighty nicer to do something like 
    {{mymacro( hx-get='my_value' )}}
  • w
    ah, yeah. I'm not too familiar with Jinja. Using Django I'd just pass it into the context as 
    {'hx_get': 'my_value'}
    and then possibly do something like
    Copy code
    <div 
  id="myId"
  {% if hx_get %}
  hx-get="{{ hx_get }}"
  {% elif hx_post %}
  hx-post="{{ hx_post }}"
  {% endif %}
></div>
    But that's more rough than specifying 
    attrs
    in your case so 🤷
  • h
    you can still use the attrs w/ DTL
  • h
  • h
    but it still means you have to pass as an object vs direct kwarg 😦
  • w
    huh, good to know
  • d
    Hello. I used HTMx for a project back when HTMx was at v0.6-something and I loved it. But, after completing the project I wasn't sure if I had really understood what I had done or if I had implemented it correctly. The main issue I was having was how best to present whole pages and partials at the same time: GET /docs should return a whole page with a list of documents GET /docs/1 should return a whole page with document #1 At the same time, I should be able to request a PARTIAL of just the list of documents - not a complete HTML document I should also be able to request a PARTIAL of the document such that it can be included elsewhere. For that project I chose to implement routes that fetched whole pages: GET /docs GET /docs/1 ...and another set of routes that fetched partials: GET /api/v1/docs GET /api/v1/docs/1 For my most recent project using HTMx I decided to use just one set of routes but use a special query parameter that indicated to the backend whether I was asking for a whole or a partial and the type of partial I was asking for: GET /docs = a whole page GET /docs?_format=table = a partial of the list of docs in tabular form GET /docs?_format=select = a partial of the list of docs in a select/option format to populate a selection list GET /docs?_format=card = a partial of the list of docs in a set of HTML5 card components Does this make sense? What is the 'right' way I should architect this? Double routes? Specifying partial-type in query string? Something else? I apologize if this has been already discussed elsewhere. Thanks, in advance, for your responses.
  • a
    there is not really a "the right way". For example, I've used another approach where I do something like: /docs = whole page /docs with the 
    HX-Request=true
    header (htmx adds that header by default) = partial page, without most of the boilerplate that is "static" like header, footer, etc.
  • b
    my 2 cents (worth less than 1 cent, probably): - a hypermedia-driven app exposes a UI-oriented API, instead of a data-oriented API - In other words, routes are closely tied to the UI - As such, exposing separate routes for different views of the same data is OK
1...924925926...1146Latest