Thanks; making it pluggable would be really great, since I need custom event filters for what I'm trying to do now. Isn't it possible to simply replace

eval

by

Function

throughout htmx as per this info? -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval!

we use Function iirc, but the safety issue is more around content injection than the actual eval() call (which has some additional scoping issues)

yeah so user error 😦

For allowing

eval

I'd need to include

unsafe-eval

in

script-src

which would defeat the purpose of CSP. Is there perhaps a way for me to wrap my page's

nonce

around the script run by

hx-trigger

when it handles event filters?

unfortunately I doubt it, although I'm not a CSP expert.

OK, so, if you handle the

htmx:configRequest

event, you can cancel requests

that can be done in pure javascript, no eval

Just for a bit of context, I've got a page with multiple tabs, each of which uses

hx-get

to pull data from the server when the tab is activated. In the page header, there is a selector for specializing content to a given field of study, and this selector also triggers the tab contents; however, I want to trigger the tabs'

hx-get

only for the active tab, so I need to check if the tab is active, which I do with a custom event filtered by custom JS checking if the tab is active. Is there a way to do this more smartly without the event filter? Namely something like

hx-trigger="custom-event[check if this tab is active, but no eval called] from:body"

or similar?

You would want to do something like this:

js
  htmx.on("htmx:configRequest", function(evt) {
    if(evt.target.classList.contains("tab") && evt.target.classList.contains("active")) {
      evt.preventDefault();
    }
  });

not tested, but that's the idea

OK thanks a lot, I'll give it a try.

So I indeed got it to work with your suggestion, in my case

htmx.on('htmx:configRequest', evt => {
    if (evt.target.closest('div.portal-tab') && !evt.target.closest('div.portal-tab').classList.contains('active')) {
    evt.preventDefault();
    }
});

but for the triggering element, I have to add a small delay to make sure the tab settles (in my case by

bootstrap5

) to being marked as active before

hx-get

runs, e.g.

hx-trigger="click delay:200ms from:#reports-tab"

. Is there (or could there be) a way to have a trigger wait for another event, like

hx-trigger="click after:other-event"

?

that would be something I would look to hyperscript for

Right, got it. Thanks!

How would you feel about a

closest

keyword in _hyperscript? As in:

on htmx:configRequest(target)
    set $tab to the closest <div.portal-tab /> to the target
    if $tab.active then 
        halt default
    end
end

This doesn't work right now @User -- it's just a proposal. But that's what you get for posting raw Javascript into this forum: someone is going to come along and try to add just one more shortcut into _hyperscript.

that exists

Shoot. I swear I checked the docs before I posted this. Whadya know, someone beat me to it 🙂

must have been a good idea then 🙂

I'm going to submit a PR to alphabetize the list of Expressions on the website.

This is not quite ready for release, but all that I have left is packaging and automation for its first (pre)release. https://github.com/bit-badger/Giraffe.Htmx It's the shared library result of my experiment, already fielded, in converting a Vue application to an "htmx SPA". The README describes it and has examples. It brings htmx awareness to Giraffe (the F# web server that sits atop ASP.NET Core) and its view engine (which produces HTML via strongly-typed functions).

Once I get this (pre)release done, I'll be ready to start on the (promised, and intro post already drafted) write-up of how it went.

vue to htmx experience! Very much looking forward to hearing how it went!

I am using py4web (succesor framework of web2py) with htmx. I use it mainly to have edit html forms on the same page without needing to reload the while page. It used to work super good with version 1.4.1. The latest htmx version produces some mangled Form POST values in my html forms:

this is how it used to submit stuff in 1.4.1:

As of 1.6 we respect the

enctype

declaration on forms. You are probably generating forms w/ an enc-type `mutlipart/form-data`: https://www.w3schools.com/TAGs/att_form_enctype.asp

Yep that seems to be it . Let me check. Thanks already!

Are there any logos for htmx that aren't made of text? I'm trying to put one on a README on GitHub - it "looks good on my machine", but not so much actually on the site. :/ I can make one if need be, I just though it would be easier to link to one if it exists.