https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • f
    Thanks for that suggestion! I gave 
    onLoad
    a try and that seems to work better 👍 I'm passing a scope now to each component's init and instead of doing 
    document.querySelector
    I use 
    scope.querySelector
    to scope it down to the htmx component
  • b
    Is there a way to listen for a custom header from the server in addition to an xhr.status? i have 2 modals that are open and upon saving the server sends back a 204 code, but then both modals close since they are both listening.
  • b
    Copy code
    js
<script>
  document.body.addEventListener("htmx:beforeSwap", function (evt) {
    if (evt.detail.xhr.status === 204) {
      //closePopUp();
    }
  });
</script>
  • b
    that code will close any popup open since they all have the listener. is there another way such as listening for a custom header response from the server?
  • f
    Thanks bro
  • q
    Hey folks - does anyone have any experience and/or tips for using htmx within an existing React application? My goal is to rewrite a small portion of our existing application so that I can demonstrate htmx’s viability in our specific context but I haven't been able to get htmx tags to have any effect. So far, I’ve tried: * Including https://unpkg.com/htmx.org@1.8.4 in the document head explicitly * Including https://unpkg.com/htmx.org@1.8.4 via https://www.npmjs.com/package/react-script-hook * Including it as an npm package But in all cases, the htmx tags are ignored. For example, see https://codesandbox.io/s/boring-blackburn-7z339e.
  • m
    since react mutates the DOM after the initial request, you are probably going to have to call 
    htmx.process()
    on the new content to hook it up: https://htmx.org/api/#process
  • m
    not sure exactly where in the lifetime of the element to call it, but that's likely the problem
  • q
    Fantastic, thanks. I'll experiment and will update if I make any progress.
    m
    • 2
    • 2
  • q
    Fantastic thanks I ll experiment and
  • b
    The event header extension sets a request header named "Triggering-Event" without an HX- prefix. Is that a common practice with extensions?
  • b
    that kind of triggers my OCD... ba dum tss
  • m
    🤦
  • w
    I'm using FastAPI, and building a navigation with HTMX that replaces the 
    <main>
    content . In order to respect deep links. It seems like I need to detect the HX-Request=True to render a partial vs full page when a user interacts with the page vs wants a full render from a deep link.
  • w
    Is there a pattern to: 1) Compost full vs partials templates in FastAPI 2) Easily detect the header without redundant code?
  • w
    In this example the author detects the hx-request header and returns a partial, otherwise just redirects to index. Is this normal? https://github.com/marty331/fasthtmx/blob/dd3818f97188016382b0dfe4311f00f5e42f1a5c/main.py#L46
  • a
    If I am understanding your question, for #1, if you are using Jinja, you can use this: https://github.com/sponsfreixes/jinja2-fragments
  • a
    (shameless self promotion)
  • a
    re detecting htmx, there are libraries that offer helpers (for example, checking 
    request.htmx
    or a global 
    htmx
    object instead of the verbose 
    request.headers.get('HX-Request')
    ). Same for generating responses. I don't know that is out there for FastAPI, though.
  • a
    I usually work with Flask, where there is https://github.com/edmondchuc/flask-htmx
  • h
    hi peeps, could anybody help to figure out what am i doing wrong with a minimal setup to have htmx + echarts for a super simple page?
  • h
    Copy code
    Uncaught ReferenceError: htmx is not defined
    at hx-echarts.js:1:1
  • h
    ok htmx is defined now but the chart is still not loading. web development is so much fun! 🙂
  • s
    https://discord.gg/bhPANsus Hey HTMX people, I'm starting a Discord server on front end development for Python developers (if one exists already let me know). I see it as a place where we can discuss the relative merits of things like PyScript, Flet, and HTMX (not Python but popular among Django developers and Pythonistas). Please join if you're interested!
  • w
    It's not particularly hard to do partials with FastAPI. I'm interested in the case of deeplinks.
  • w
  • w
    I might want to pull the accounts.html partial with a path parameter for 12345 and then swap the HTML content with the AJAX response from the controller that responds to "accounts/{account_id}"
  • w
    However if the user deep links to the full URL: https://foobar.com/accounts/12345 I want to be able to render the entire page and also call the accounts controller with the account_id parameter.
  • w
    Is there a pattern for how to do this with Flask or FastAPI? They seem relatively interchangeable if you use Jinja templates.
  • m
    it sounds like you want to look at the 
    HX-Request
    header to determine if the request is from htmx or not. You can also look at the 
    HX-Target
    header if there is an 
    id
    associated w/ the target of the current request: https://htmx.org/reference/#request_headers
1...944945946...1146Latest