Comments (7)
I don't think so because I previously tried (like as the reference video ) with "Hx-Trigger" and it didn't work. Instead of using hx-on
I've tried hyperscript and it is working as expected.
from htmx.
I think the problem with hx-on is that it's listening on the element it is placed on. You'd need something like hx-on-from-body. :)
from htmx.
I've tested my code again with some variants and here my observations:
- the formats
hx-on--customevent=
orhx-on-customevent=
are definitely not working - the format
hx-on="customevent:
is working, - the key "hx-trigger" passed as header is insensitive-case
The strange here is when I posted this issue, the format hx-on="customevent:
was not working but it is now @ _ @
however that format will be deprecated as documentation, so it is not really a solution. Moreover it seems hx-on
is very limited regarding the number of operations I can do, hyperscript is more flexible in this aspect.
from htmx.
Most likely you had Typo error, seems like htmx is case sensitive went it comes to headers, so instead of hx-trigger
, you use HX-Trigger
it will work fine.
Eg:
`import { Elysia } from "elysia";
import { html } from '@elysiajs/html'
const app = new Elysia()
app
.use(html())
.get('/', () => {
return '
})
.get('/binding', ({ set }) => {
set.headers['HX-Trigger'] = 'custom-event'
return '<span>Msg from server</span>'
})
.listen(3000);
console.log(
🦊 Elysia is running at http://${app.server?.hostname}:${app.server?.port}
);
`
from htmx.
Well I'm glad that you find another solution. But the example above it's working as well, maybe you use the "Hx-Trigger" with 'x' in lower case and it caused the issue? Not sure to be fair.
:)
from htmx.
Nice, good job!
from htmx.
yes, hx-on
is designed to only be used for simple things, for anything beyond that i highly recommend hyperscript, alpine.js or https://github.com/gnat/surreal
from htmx.
Related Issues (20)
- htmx 2.0.0 breaks <template> elements inside Web Components HOT 5
- htmx should preserve form element order when encoding form data for submitting via GET or POST HOT 1
- HX-Location feature: push url options (example of working code, tiny change) HOT 3
- poll trigger for table content - how to keep/disable scroll on update HOT 1
- v2.0.0 hx-swap="delete" + hx-retarget="body" triggers uncaught exception HOT 1
- Extension Performance Improvments
- hx-swap="delete" should be allowed to work even with no request at all HOT 1
- Fetch hx-vals programatically HOT 2
- sha384sum is giving me the wrong answer for 2.0.1/dist/htmx.min.js HOT 1
- Does new extension released with core? HOT 2
- feature request: out-of-order rendering support
- `htmx:beforeRequest` and `htmx:beforeSend` event does not send on load trigger HOT 1
- `'htmx.d.ts' is not a module` HOT 5
- hx-trigger from:html with data-bs-theme HOT 1
- hx-swap-oob not working as expected HOT 2
- triggerEvent relies on a non-null target existing; therefore beforeSwap won't fire if target is null (possible when hx-retarget is used)
- Add the `pushUrl` option for `htmx.ajax()` calls
- UX is broken for streaming HTML HOT 2
- I am using the hx-boost feature and I am experiencing strange problems. Javascripts such as dropdown and modal do not work
- Trigger modifier "from" prevents default behaviour of some input fields HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from htmx.