https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    That makes sense, but is going to put me through some circular dependencies. I see how to resolve it, but stilll, grrr.
  • b
    Working for me. This is nice. Using the 
    hx-swap-oob
    option to tack on CSS/JS imports to the parent 
    <head>
    enables a decent component-based approach.
  • p
    Just a small tip if you are using Bootstrap tooltips and htmx: It is important to hide any tooltip that might be visible if you are swapping the HTML, otherwise, the tooltip might get "stuck" on the page. I did this with an 
    htmx:beforeSwap
    event listener. I know in my case that the tooltip is part of the 
    <tr>
    element that will be swapped (On of the many rows that could get swapped). So I check for that and hide the correct one:
    Copy code
    document.addEventListener('htmx:beforeSwap', ev => {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            const elementToBeSwapped = ev.detail.target;
            for (const tooltipTriggerListElement of tooltipTriggerList) {
                const rowElementOfTooltip = tooltipTriggerListElement.closest('tr');
                // To avoid that a tooltip remains stuck because the HTML that it refers
                // to is swapped out for new html, we need to hide the tooltip.
                if( elementToBeSwapped === rowElementOfTooltip) {
                    bootstrap.Tooltip.getInstance(tooltipTriggerListElement).hide();
                }
            }
        });
    It is also important to not use 
    new bootstrap.Tooltip(..)
    , but 
    bootstrap.Tooltip.getOrCreateInstance(..
    so already initialized tooltips is not initialized again. (I am inializing from 
    htmx.onLoad(function (element) {...})
    so that swapped in tooltips will also work.
  • w
    Strangely, it was an issue of Django not copying 1.8 into my staticfiles folder when running collectstatic, so nginx was serving 1.7 (which doesn't have hx-location). But thanks for the heads up!
  • p
    I have a question on how people are dealing with "JavaScript enhanced" elements on the page that get swapped? For example, I have a date picker using the flatpickr library in a form that is swapped when a new date is picked because there might be form errors. When the response arrives, I initialize the date picker from the response again via 
    htmx.onLoad()
    , but there is a noticiable, visible change happening. I have simulated this at https://codepen.io/wimdeblauwe/pen/eYrwZgv for those that want to have a look. Just select a different date, and you will notice the flash. Interestingly,, I had to do some funky stuff to simulate it with demo.htmx.org, because flatpickr already initialized the date picker in the 
    <template>
    that simulated the server response. Is there a possibility to temporarily mount something in the dom, non-visible and only swap after some callback was called where I could run the flatpickr initialization code to avoid that flicker?
  • m
  • m
    Welp, I had a day and a half spike day at work, and made a prototype task tracker. It's woefully incomplete, but it was good for a learning project.
  • c
    In htmx? I tried to sneak in an html-first api instead of a json api + swagger in my work but that didn't fly. We mantain a couple of uis that really have no business being react apps but welp, perhaps some day...
  • m
    many such cases
  • c
    but to be fair it wasn't a good fit for it, I just jumped the gun there. Still, it requires a lot of convincing to stop writting react I have lately been thinking on microservices serving html with htmx and another microservice would compose those pages, stitch them together and serve them as one.
  • m
    Yeah. Htmx, Kit, XTDB, and Bulma.
  • b
    Is it possible to create client-side-only interactivity with htmx? E.g. click on a div, create another div, without any calls to the server.
  • p
    No, I would suggest either hyperscript or AlpineJS for that.
  • b
    ic, thanks!
  • p
    For 
    htmx:beforeSwap
    , it seems that 
    event.detail.target
    contains the HTML element that will be swapped out. Would it be possible to get a reference to the element that will be swapped in in that callback? That might enable that I can initialize some html element before it get's swapped in by running some JavaScript and thus avoid flickering. Not sure if that is possible before it is actually on the page, but I would like to try it. Any idea how I could do this?
  • m
    I had a different but similar requirement. I had a problem where I was using shoelace.style web components and HTMX was trying to restore focus to it before it was initialised. Maybe that’s a common thing people will want to do 🤔
  • p
    Yes, I do think so. So support for this would be great if possible.
  • t
    Could you use 
    htmx:afterProcessNode
    instead to add stuff to the node after it's created and processed by htmx?
  • p
    How could I get the element that is about to be swapped in? The docs (https://htmx.org/events/#htmx:afterProcessNode) do not mention anything about that.
  • t
    As far as I understand it, the event would be called for the new node
  • p
    Yep, just tried it. But the problem is that it seems to be visually already on the page because there is still flickering going on. I need to be able to hook into the lifecycle when htmx received the response but before it has swapped the thing into the dom.
  • a
    What about toggling the 
    hidden
    attribute of the element?
  • a
    Have the response return it hidden, initialize it, then unhide
  • p
    This is about a date range filter with 2 date inputs. If I would do that, the inputs would suddenly be hidden and then appear again.
  • p
    It could work for something that appears new on the page, I agree.
  • f
    Has anyone here ever evaluated Inertia ? I wish I could find an in depth analysis between htmx and Inertia… Common part: - You don’t have to implement a JSON “REST” API to have rich UX and interaction in the front-end without full page reload Differences: - In the front-end, your views will use React / Vue / Svelte with Inertia, but the variables will be sent into them from the controllers in the back-end
  • t
    @few-vegetable-15970 i believe that is a blog post that's waiting to be written!
  • f
    Exactly… I would like to do it, if I had time to evaluate Inertia. I’ve already convinced my front-end dev coworker to work with htmx on future projects, so it may not be soon.
  • p
    Can I prevent the trigger event on 
    <form hx-get="" hx-trigger="every 10s">
    from firing if the form has been interacted with in the last few seconds?
  • b
    Hi everyone I'm trying to build a similar search like remoteok.com, at first my app should show a initial query (list of jobs), and when I write something on my search box it should render the result, so far what I accomplished is this. 1. Inital page:
1...863864865...1146Latest