Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

hx-on is not working for custom events #2539

Open
warcayac opened this issue May 9, 2024 · 6 comments
Open

hx-on is not working for custom events #2539

warcayac opened this issue May 9, 2024 · 6 comments

Comments

@warcayac
Copy link

warcayac commented May 9, 2024 •
edited

Taking this video as reference I've tried to fire a custom event with hx-on attribute but is not working.

Client-side code:

export default function Home({people}: TProps) {
  return (
    <Layout>
      <div>
        <h2>Phonebook</h2>
        <form 
          hx-post="/api/contacts"
          hx-swap="innerHTML"
          hx-target="#listing-box"
          hx-on--after-request="this.reset()"
          hx-on--customevent="console.log('chesu!!')"
          >
          <div>
            <label for="name">Name: </label>
            <input type="text" name="name" id="name"/>
          </div>
          <div>
            <button type="submit">add</button>
          </div>
        </form>
        <h2>Numbers</h2>
        <div id="listing-box">
          <PeopleListingBox {...{people}}/>
        </div>
      </div>
    </Layout>
  )
}

Layout component code:

export default function Layout({ children, title = 'My App' } : TProps) {
  return (
    <>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />

          <link rel="icon" href="/public/img/elysia.png"></link>
          <link rel="stylesheet" href="/public/styles/main.css"></link>

          <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
          <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>

          <title>{title}</title>
        </head>

        <body>
          {children}
        </body>
      </html>
    </>
  );
}

Server side code for contacts Api (I'm using Bun with ElysiaJs):

export const contactsRoutes = new Elysia()
  .use(html())
  .post(
    '/',
    ({html, body: {name}, set}) => {
      const value = name.toLowerCase();
      if (people.some(person => person.name.toLowerCase() === value)) {
        set.headers['hx-trigger'] = 'customevent';
      } else {
        const newPerson: TContact = {
          id: 0,
          name,
          number: "?",
        }
        people.push(newPerson);
      }
      // set['status'] = 201;
      return html(<PeopleListingBox {...{people}} />);
    },
    {
      body: t.Object({
        name: t.String({minLength: 3, maxLength: 100})
      })
    }
  )
;

after sending a Post request with a duplicate name, server returns this for Response Headers section:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf8
Access-Control-Allow-Headers: *
Access-Control-Allow-Credentials: true
Vary: *
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Expose-Headers: *
Access-Control-Exposed-Headers: *
hx-trigger: customevent
Date: Thu, 09 May 2024 17:13:11 GMT
Content-Length: 120

However custom event is not fired as expected and console shows no output. I've tried with:

hx-on="customevent: console.log('chesu!!')"

same result, no output.
@DioLps
Copy link

DioLps commented May 15, 2024

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 '

Test init

target here
<script src="https://unpkg.com/htmx.org@1.9.12"></script>'
})
.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}
);
`

@warcayac
Copy link
Author

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.

@DioLps
Copy link

DioLps commented May 15, 2024

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.

:)

@andryyy
Copy link

andryyy commented May 15, 2024

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. :)

@warcayac
Copy link
Author

I've tested my code again with some variants and here my observations:

  • the formats hx-on--customevent= or hx-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.

@DioLps
Copy link

DioLps commented May 15, 2024

Nice, good job!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@andryyy @warcayac @DioLps