I was doing something close to that for something before I found htmx. It always felt bad and I'm happy to have deleted that stuff.

They basically recommend having a data API that's apart from the rest of the web site.

yep, here's a shorter essay on it: https://htmx.org/essays/hypermedia-apis-vs-data-apis/

rails takes this approach as well

it works reasonably well, but I always ended up pulling the JSON API out to a separate set of URLs because, over time, needs for my hypermedia-driven app and the JSON app tended to diverge

just my experience, I offer it only as information

Any particular reason why they recommend this?

I see, their argument is mostly oriented around the fact that a hypermedia API is essentially a standalone thing, while a data API has a consumer and a certain "contract" between the two parties

Haven't really used RoR in ages, so can't really compare to it. But with the way my system is built there's nothing wrong with changing the hypermedia representation for the same object or add an alternative way to represent it

Forgive the silly question, my HTML is awful. Can I do a

hx-get

against a dynamic URL based on other page content ?

hx-get="/html/maps/" + document.getElementById("name").value

In Python I'd probably be looking for an f-string or similar to put that string together. I don't even know if it can be done in HTML though

As it currently stands, you'd want to catch that request in an

htmx:configRequest

event and update the

event.detail.path

configRequest

again. Thanks ! Will look at doing that. Amazing you can intercept a request and dynamically change where it's hitting

Anyone knows a strong tailwind guy who you could recommend? I need some help to make a landing page

I'm not sure if I understand it correctly. Maybe with an example, It'll be easier to explain what I'm trying to do: https://codesandbox.io/s/sad-rui-ffk4p7?file=/index.html I have a simple site with almost static content on every page, so I'm switching (with htmx) main#main on every click on a link. The problem I have is when I'm adding "googleapis" script and initMap function to the head; I receive an error (browser console) on entering a page without proper input fields (initialized in initMap function). Theoretically, I can move the "googleapis" script and initMap function inside main#main. But then I received an error about initializing "googleapis" multiple times that "might result in more errors in future" (browser console) for each subsequent request to a page with google's autocomplete form. It is working that way (besides the error), but I'm looking for a better way to do that 😄

Are there any big projects using htmx or is it only for small projects?

i used intercooler.js (htmx predecessor) on a large rails project and I consult on a large project using htmx

i asked for "update, create..." i always have to make a file fragment. in a big project i will have hundreds of small fragments. i don't understand how to overcome this. for example hx-get="dynamic_url" I don't see a dynamic mechanism. i can handle it with my own code (python, php...) but in some cases i need to inject it from outside. for example if i want to dynamicize it with a header argument like "HX-Trigger" i can't do that. so i'm always stuck in one spot. in big projects this can turn into a maze? Translated with www.DeepL.com/Translator (free version)

What would be the biggest project htmx could be used on? How many lines? Translated with www.DeepL.com/Translator (free version)

at the end of the day, rather than size of project, the type of the interactions is going to drive whether htmx is a good choice. you can get some hints for how to deal w/ multiple updates here: https://htmx.org/examples/update-other-content/. but if that is pushed too far it will become a mess.

an essay on when hypermedia/htmx is appropriate: https://htmx.org/essays/when-to-use-hypermedia/

if the small fragments issue is due to needing to pull out many files of small bits of HTML for rendering, maybe you can find a "template fragment" implementation for your platform of choice, which removes the need to pull templating code out to a separate file just to render it: https://htmx.org/essays/template-fragments/

When you say "inject it from outside", what do you mean? From something like form values, or from javascript?

I will try "template-fragments", thank you.

<div 
    hx-get="catalog/list"
    hx-trigger="product_row_action from:body" 
    >
    {% block product_row %}
    <div row 1>...
    <div row 2>...
    <div row 3>...
    {% endblock%}
</div>

when i do create an item, i can add a new row here using

{% block product_row %}

with

**HX-Trigger Response Headers** = 'product_row_action'

which i embed in the response. but when i do update, i need to do

hx-get="catalog/list"

instead of

hx-get="catalog/list"

like

hx-get="catalog/list/1"

add url parameter. in this case i want to send the hx-get url with header. i want to send the new url with

**HX-Get response header**

like HX-Trigger Response Headers for example. i don't know how to explain it. but i need to make the hx-get url variable somehow. i can do it with javascript, but i'm trying to solve it with htmx's methods.

Moving excerpts of a conversation from #1046573806547910677 to a thread here. @rich-coat-84078 commented: ---------------- Get, post... maybe one of the most important elements. for God's sake, it is too important to be explained in 10 sentences. what is this? https://htmx.org/attributes/hx-get/ Some examples should be made. examples should be from child coloring book level to real world, sometimes complex examples. I have been tired for weeks from the document explained in 10 sentences. "You can do this with x, you can do that with y. " That's great, but how do we do it? ----------------

If I'm understanding correctly, here's what I'd do:

html
{% block product_row %}
    <div hx-get="catalog/list/1" hx-trigger="product_row_action[/* check if the action is an update */] from:body">...
    <div hx-get="catalog/list/2" hx-trigger="product_row_action[/* check ...>
{% endblock%}

May not fit all use cases though

This uses **event filters**: https://htmx.org/docs/#trigger-filters

Hello. Issue 695 on htmx GitHub suggest that auto-refreshing content that contains a bootstrap spinner without visibly "restarting" that spinner on each refresh works by simply adding

hx-preserve="true"

to the spinner's div. I'm failing to replicate that, hx-preserve doesn't seem to work for me at all. As a test, my server simply returns (surrounded by loading basic css and js)

<div hx-get="test2" hx-trigger="every 1s">
    <div id="my-spinner" hx-preserve="true" class="spinner-border" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

The endpoint

test2

in turn returns the same content without the surrounding

<div hx-get.. hx-trigger..>

. On every reload, the spinner is interrupted and starts again, ignoring the hx-preserve. I tried different html versions from 1.5.0 to the most recent one without success. What am I missing?