https://htmx.org logo
Powered by
# htmx-general
  • f
    Checking alpineJS modifiers next...
  • m
    does that need to be an 
    x-on:
    ?
  • m
    I don't know alpine at all, I'm a hyperscript guy 🙂
  • f
    Figures 🙂
  • m
  • f
    I'm trying to replicate some demo by Will, by doing it a bit differently (e.g. different JS lib ~ one that was suggested by a couple of peeps in this community).
  • m
    Copy code
    Note that all events are fired with two different names

Camel Case
Kebab Case
So, for example, you can listen for htmx:afterSwap or for htmx:after-swap. This facilitates interoperability with libraries like Alpine.js.
  • m
    try kebab-case? I remember something around this
  • g
    Some people rely on the class attribute to only reset elements that are explicitly styled (e.g. removing underline from links with classes) but it seems like htmx classes wouldn't play nice with that technique anyway
  • f
    Bingo - kebab-case works.
  • m
    😑
  • f
    Totally my bad for not reading the manual thoroughly enough - its right there for god sake 😐 So, for example, you can listen for htmx:afterSwap or for htmx:after-swap. This facilitates interoperability with libraries like Alpine.js.
  • f
    Thanks! I'm working on a Supabase + HTMX + Spring Boot template project right now and it's going amazingly well. The Thymeleaf html templates all work with the Pinegrow visual editor. Right now I'm just doing cleanup, hopefully I'll be able to post the working project up on GitHub & start doing some vids in the next week or two.
  • m
    we should explicitly mention that kebab is required for alpine. Would you mind making a pull request? You can do it against master
  • f
    That's cool. I'm trying out various approaches, to get a feel for their relative complexity and feel. From vue, svelte, htmx and (after this) hotwire.
  • f
    On it.
  • f
    Done
  • f
    Thanks all - just for info. This bit from @User
    Copy code
    <input
                            _="on htmx:afterRequest put '' into #new-todo.value"
                            id="mon"
                            hx-include="#new-todo"
                            th:hx-post="@{/public/todo/create}"
                            hx-target="#todo-list"
                            hx-swap="beforeend"
                            hx-trigger="click"
                            type="button" class="btn btn-primary" value="Add"/></td>
    Translates to this for me now with AlpineJS
    Copy code
    <div id="input-area" x-data>
                <input x-ref="nameInput" id="new-name" name="new-name" placeholder="New name..." required type="text"/>
                <button hx-include="#new-name" th:attr="hx-post=@{/create}"
                        hx-target="#collection" hx-trigger="click" hx-swap="beforeend"
                        @htmx:after-request.window="
                           if( $event?.detail?.xhr?.status === 200 ) {
                              $refs.nameInput.value = ''
                           }
                ">Add
                </button>
            </div>
`
  • m
    Copy code
    html
  <input _="on htmx:afterRequest(status)
              put '' into #new-todo's value unless the status is not 200"
         id="mon"
         hx-include="#new-todo"
         th:hx-post="@{/public/todo/create}"
         hx-target="#todo-list"
         hx-swap="beforeend"
         type="button" 
         class="btn btn-primary" value="Add"/></td>
  • m
    if you want the status check in the hyperscript version
  • f
    Right!
  • m
    (there are many ways to write it, that's how I'd do it)
  • m
    kinda love hyperscript, ngl folx
  • f
    It is rather nice, that's for sure. I'm going to weigh all kinds of pros and cons (at some point). Right now though it is time for me to call it a week 🙂
  • m
    Hey all, I am trying to add the monaco editor to a page that is driven by htmx + hyperscript. Currently I have a form with a "Save" button and a hidden input field that tracks the content.
    Copy code
    <form hx-post="edit" hx-target="#messages" id="editor-save">
    <input id="contents" name="contents" value="Monaco Contens" type="hidden">
    <button _="on click call monacoEditor.getValue() then put it into #contents.value">Save</button>
</form>
    This works great! The question is, how do I add keybindings for Ctrl-S to save the contents as well? monaco has a keybinding api I can hook into, but when I manually run "#editor-save button.click()" the the hyperscript doesn't seem to get triggered. What would y'all recommend?
  • g
    what element has the id 
    editor-save-button
    ?
  • m
    That is what happens when you try and make things clearer 😄 the button element inside the form
  • m
    it should trigger the click event on the button: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
  • m
    > When click() is used with supported elements (such as an ), it fires the element's click event.
  • m
    can you use the 
    montiorEvents
    trick outlined here: https://htmx.org/docs/#debugging
1...354355356...1146Latest