https://htmx.org logo
Powered by
# htmx-general
  • m
    i bet if you inspect the DOM via your developer tools, the form will not be there
  • m
    it's rendering properly because the browser is just ignoring the form tag entirely
  • m
    is my bet
  • r
    so what do you suggest? to use 
    divs
    instead ?
  • m
  • m
    you could use 
    hx-include
    and some ids on the inputs if you want, or, yes, using `div`s would be much cleaner
  • a
    Note: I got htmx working with a serviceWorker that reads directly from cache, meanwhile fetches the resource in the background and updates the cache. The reason it didn't work last week was that I simply didn't use the API properly. The serviceWorker API and lifecycle are a bit idiosyncratic, for anyone attempting to use them the first time, I highly suggest reading the documentation carefully. Also Chrome has a bit better dev utilities around serviceWorkers, which makes them easier to debug (I typically use FF).
  • u
    Could anyone share any cool projects they are working on / have worked on using HTMX for page changes?
  • h
    👋 Hi folks. I'm trying to get 
    hx-boost
    working with HTML forms but it's not clear what the expectations are for my server-side implementation. Does it return a regular HTML page (header,body, and all) or just a snippet?
  • m
    hx-boost is probably targeting the body, unless you have an explicit 
    hx-target
    in the parent hierarchy
  • h
    Ah, that makes sense now. Thanks.
  • m
    @User reminded me that you can include any element, which simplifies this case:
    Copy code
    html
<tr hx-target="this" hx-swap="outerHTML">
        <td><input type="text" name="name" value="{{row.name}}"></td>
        <td><input type="text" name="email" value="{{row.email}}"></td>
        <td>
          <button class="btn" hx-put="/edit/{{row.id}}"
                  hx-include="closest tr">
              Update
          <button>
          <button class="btn" hx-get="/view/{{row.id}}">Cancel</button>
        </td>
</tr>
  • h
    Is there a way to determine on the server-side if an HTMX request was triggered directly from an 
    hx-*
    attribute vs. being boosted?
  • m
    No, not right now
  • m
    You can check the 
    HX-Request
    header to see if it's an htmx request. You might be able to use some of the other headers to disambiguate: https://htmx.org/reference/#request_headers
  • m
    but that seems... sketchy
  • h
    Would it make sense to set a value for 
    hx-request
    to 
    explicit
    or 
    boost
    instead of 
    true
    ?
  • m
    Ideally a URL that a boosted element would hit would have two uses: the boosted (body only) response and the "normal" (ctrl-R) response w/ a full body. Are you using a single URL for more than that?
  • h
    Copy code
    cs
public IActionResult OnGet()
{
    return Request.IsHtmx()
       ? Partial("Normal", this)
       : Page();
}
  • h
    So I have an endpoint that already handles an HTMX (partial) request, but the boosting is making even the initial navigation load the partial.
  • h
    That is, when I boost at the 
    <body>
    , the solution is don't do that
  • m
    🙂 yes, you probably want to have distinct URLs for these resources sorry about that
  • h
    No worries, was playing around with boost. Thanks for the clarification.
  • h
    Hi guys, I'm trying to work with the hx-post of a form in MVC partial view, but the response of the controller method is being rendered inside of the existing form, generating a chain of a form inside of the existing forms each time the button is clicked, does the htmx with the return PartialView() of MVC force the response inside the existing (posted) form?
  • h
    What I would like is to put the controller return in a different element than the posted form (in this particular case, the element (div) that actually contains the posted form)
  • g
    use 
    hx-target
  • h
    I actually already try the hx-target, in the button and on the form, but it keeps rendering it on the form, I will check it again
  • h
    thanks
  • h
    Thanks Deniz, I finally make it work with the hx-target, for how it looks, the hx-post and hx-target has to be on the form and not in the button as I was thinking
  • m
1...362363364...1146Latest