reworked from a href to a hx-post, I have the first proof of concept on the call back into the server and the full table partial being returned and updated into the seperate hx-target, so it looks like I am on track

can you add a a

console.log

to that and see if it is even firing? Push come shove, the

hx-headers

attribute can also do that for you

So I now have my hx-post on an img working nicely, leading to back end work and eventual return of a full table update in a partial, FAR less clunky than my full page refresh ( remmember I am coming from a long term programming background but VERY little web programming )

I would like to add some response on the button that gets pushed that would for example fade or grey the button while the request / response is in flight

I understnad this is something to do with hx-indicator, however, examples seem to be based on placing an animated svg next to the button rather than modifying the button image itself.

Any tips on how to just grey out or fade button while request is in flight?

These are my button images I want to manipulate

and an example of my htmx tagging

<img data-hx-trigger="click" data-hx-target="#system-table" data-hx-post="/awsstartall/{{ system.id }}" src="{{ url_for('static', filename='images/start_sm.png') }}" alt='aws start' title="AWS All Start">

For the fisrt of those buttons

and I note a mild regression, prior these were href and therefore showed a click finger in the mouse icon when floating over, now they remain as the normal mouse pointer as they are now img. What is the correct thing to do here to get that finger pointer, but maintain my htmx behaviour?

We did something on hx-indicator just a couple of days ago. Let me see if I can find it.

Check out the discussion around this: https://discord.com/channels/725789699527933952/725789747212976259/925103386964144179

I like my hyperscript solution the best, but since you're just starting with htmx, look at my first example. It works pretty nicely and shows off how to use hx-indicator 🙂

always nice to get some positive reinforcement on a design decision you made

there is always a temptation to add magic, so hyperscript is acting not only as a feature pressure outlet for htmx, but also as an outlet for magic

thanks, will dig

From a code organization standpoint, where are people keeping extra JS functionality that should be run after an AJAX call? Let's say: 1) I have a

base.html

template that contains my menu header, a footer with firm info, and loads css in the header and js in the footer. It has a

#content

div that HTMX will target to "change pages" 2) Navigating to

/about/

from outside loads the full

base.html

template and the content from an About page in the

#content

div, but if you're at

/home/

and click on a link to the About page, it loads the page using HTMX. 3) I have scripts that I want run on the About page. These scripts depend on libraries that are included in the footer of the

base.html

template, so including a

<script>

tag in my partial works becuase the footer has already been loaded, but it won't work if the page is accessed directly (i.e., not from HTMX) since the footer hasn't loaded at that point.

Dunno if this is the "right" thing to do, but scripts will work if you embed/link to them in your returned content. So, I'll include things that are used everywhere in the main header of the page. Anything that's only useful on a handful of pages will be a

<script>

tag at the top of that partial.

Yeah, but the problem I have is that some of my JS libraries (e.g., Stripe for Payment Processing) are loaded in the footer, so they're not accessible when the first

<script>

is seen on initial load (before the full body template has loaded). Loading the JS libraries in the

<head>

would probably solve this, but I thought it was best practices to load libs in the footer

Happy New Year from Germany 🥳🍾

Happy New Year everyone. I hope you all have a great 2022 and that everyone here finds htmx, hyperscript or both useful or, at the least, interesting. A big thank you to all the folks who have sponsored us via Github and, in particular, a big thank you to the inimitable @User, @User, @User and @User for all your contributions to both projects. 🍻

still struggling with htmx-inidcator, I can add the class='htmx-indicator' to the img stanza that otherwise carries my functionality, and indeed as per expectation the image button is not rendered, until I press it and then then it is rendered while the htmx request is in flight and disappears when it is complete. So I want a style that is effectively the inverse, or close to, with the image having opactiy 1 and 0.3, something like

.press-indicator{ opacity:1; transition: opacity 500ms ease-in; } .htmx-request .press-indicator{ opacity:0.3 } .htmx-request.press-indicator{ opacity:0.3 }

My problem is I have no idea where to put that "class", I am just not familiar enough with JS to naturally know where it should go....

The only JS files I have are htmx.js and then a simple utils.js file that I presently have 2 function definitons in.

Are there any full examples I can look at for this kind fo inidicator style definition, so I can see where / how that set of information is hosted...

ha, so worked out it needed to be in a css file, not a js file ( told you I was new to web ) and indeed, I seem to have that button fade functionality now while the request is being serviced.