https://htmx.org logo
Powered by
# htmx-general
  • l
    I'm feeling a bit silly for asking this but how do you get the htmx:afterSwap event listener to work? Can someone provide me with a working example? I find the docs a bit lacking regarding these functions at the moment (sorry, it's probably me but no harm in asking is there?).
  • m
    no worries, the docs are thin w/ javascript
  • m
    Copy code
    js
htmx.on("htmx:afterSwap", function(evt) {
  // whatever
}):
  • m
    is probably the cleanest way
  • m
    I think it would be very useful to have a search functionality in the documentation. You can apply for free to to https://docsearch.algolia.com/ and then just add a bit of code on the site to get that working.
  • m
    🤔
  • m
    You don't like search functionality?
  • m
    I applied and sent them an email and got approved very quickly. Works great for my documentation 🙂
  • m
    i just applied
  • m
    I'm suspicious of all new technology, including javascript.
  • m
    Just take it for a spin and see if you like it. It's accurate and fast. I often end up doing a google search 
    site:htmx.org keyword
    to find something.
  • l
    Thanks!
  • s
    BTW, I found this cool way to follow the htmx tag on Stackoverflow:
  • f
    Hi! I have a question regarding a patter with HTMX I'm using at drwn.io What I want is the following: text input doing active search using hx-get, but the input is also a form that you can submit, and it still works. That way someone can bookmark the URL foo.bar/query?search=xxx (the one they will get if they hit "Enter" and submit the form). The way I'm doing it right now is something like:
    Copy code
    html
<form action="/query" method="get">
  <input type="text"
         hx-get="/query"
         hx-trigger="keydown changed delay:100ms" 
         hx-target="#search-results"
    Then the processing endpoint is:
    Copy code
    python
@app.get("/query")
async def query(request: Request, search: str):

    if search == "":
        # show something if user removes search terms
        return get_rand_drawings_html()

    search = process_query(search)
    html = render_results(search)

    if not request.headers.get("HX-Request", None):
        return templates.TemplateResponse(
            "index.html", {"request": request, "search_results": html}
        )

    else:
        return html
    What I'm doing is: If the 
    HX-Request
    header is found, render only the search results. Otherwise, treat it as if it was a normal form and render the whole page normally.
  • f
    But I'm not sure if that's the best pattern to do it, or I'm missing something.
  • f
    I find the pattern straightforward and easy to reason about, but I'm turning it into a blog post, so I wanted to make sure I'm showing the best way to do it.
  • g
    @full-river-33288 — Yeah, that will work, but I don’t think you NEED to use the same endpoint on this. If you had 
    /query
    and 
    /query-typeahead-only
    it would work just as well.
  • g
    in asp.net core there is the RenderPartial method, which renders a template partial as if it were a full template. Is there a similar thing for Flask?
  • f
    Mmmmh I think so, I'm using FastAPI with Jinja2, you can render templates on their own. I should look into it
  • g
    I think the difference here is whether or not you’re updating the URL or not (probably using 
    hx-push-url
    ) The 
    hx-request
    header is very useful, though, in similar circumstances when you’re embedding a page fragment and updating the URL.
  • f
    The reason to have everything in the same endpoint is that I can have a cloudflare page rule caching everything matching drwn.io/\*?\*search=*
  • g
    Yep. That makes sense 🙂
  • g
    And, CloudFlare is able to differentiate based on the 
    hx-request
    header, too?
  • f
    I mean, it's not really needed because the site hardly has any traffic, but one of the reasons to create it was experimenting different stuff, that's why I did it hehe
  • f
    Yes, you can use headers but I believe it's only for the paid plan
  • f
    In fact, one thing I love about directly rendering html is that I can cache all the live search results in memory inside the server
  • f
    at least while it's mangeable, but there are 2 replicas of the service, each with 4 workers (yes, 10000% overkill but ¯\_(ツ)_/¯) and it's using very little ram
  • f
    that means that I write html directly inside the python script, which is not pretty, but I can imagine an app with higher performance requirements doing that for very hot paths
  • f
    so it's 0 work for the server (just get from the cache) and 0 work for the client (you just render the html)
  • g
    Yup. Nicely done 🙂 and besides, there’s no reason to make something inefficient just because you’re starting out. If it’s not much more work to do it that way, awesome.
1...144145146...1146Latest