but weirdly, I get autocomplete in Console when starting to write htmx. So it is loading?

ok, got it. It is something with CORS. Finally something to debug! 🙂

Hi, I'm testing htmx for the first time. I'm trying to load a table content from my template (I'm using Symfony+twig):

twig
{% extends 'base.html.twig' %}
{% block title %}Book index{% endblock %}
{% block body %}
    <h1>Book index</h1>
    <div hx-get={{ path('app_book_index_table') }} hx-trigger="load" hx-target="this">
        Loading...
    </div>
{% endblock %}

and it works but only the first time I load the page. If I go to another page and the return to this page a see only the "Loading..." label but the table is not loaded. I see that the GET call is fired and the HTML code received but the content is not swapped. Browser cache problem? Any suggestion?

so

apparently hx-boost breaks fancybox

as in if you write the

hx-boost

in a parent container that has a fancybox gallery in it the images will open but when you try to close the image it will become unresponsive

that is caused by

fancybox-container

not removing itself and getting stuck

how to fix that?

hmm, doesn't seem to be working

placed it both in the gallery container and in the fancybox-container

😦

what's interesting is it gets stuck in is-closing state

Solved. It was a compatibility issue with Stimulus. I disabled Stimulus and now I can see the table loaded every time

Try

hx-disinherit="*"

or

hx-boost="unset"

.

Tried all, doesn't work as long as there's hx-boost

I.e. fancybox-container still sticks

I wonder why turbo might not have that problem

https://stackoverflow.com/questions/45473522/turbolinks-lightbox-rails-5 https://stackoverflow.com/questions/18105848/jquery-fancybox-doesnt-show-only-after-page-reload

Question, can

hx-vals

contain a nested JSON object?

I don't believe so unfortunately

unclear how to encode nested values for the server

I am calling a workflow engine and I need to pass it configuration data e.g.

workflow name

, the

trigger name

. But I also need to pass it a data object that the workflow works against. I was hoping to do this with pure HTMX but not sure I can do it....

I was able to expose an intermediate endpoint where I capture the metadata from the path parameters and the data from the

hx-vals

. Thanks for the clarification.

I then pass this on to the workflow endpoint expecting JSON.....

I'm using HTMX to make a small dashboard for some data visualisation, does it sound like a bad idea to have a bunch of routes responding exclusively with OOB swaps rather than setting targets?

Looks like I’m not the only one struggling with deep linking. Found another YouTube video where the person had to have an if statement in their method to check for hx-request and render a partial in that case.

Sounds fine to me 🤷‍♂️. I’d just go with whatever was easiest to implement and maintain

Is it possible to add additional hx-select-oob from the response header? Similar to HX-Reswap. The use case is: I have a generic table component with fancy checkboxes/filters to search/delete rows. Now when using the table on specific page, I need to update page-specific blocks with hx-select-oob. But generic table html doesn't know about that. I see two possible variations to implement this: a) It would be handy if my server route sent these blocks ids with e.g.

Hx-Select-Oob=#block

b) Another way would be in general, if the response html has a top-level element with

hx-select-oob

on it, use this to swap. Even if this was not present on the source element. Basically treat response headers as higher priority. @mysterious-toddler-20573 what do you think? Did you have these use cases?