https://htmx.org logo
Powered by
# htmx-general
  • m
    can you post the HTML?
  • m
    First thing to establish is that you can find the form:
    Copy code
    on htmx:afterSwap log me
  • m
    make sure the event is being fired as expected and 
    me
    is what you expect
  • m
    (I'm assuming you are putting this on the form
  • m
    once that's established, you should be able to write:
    Copy code
    on htmx:afterSwap reset() me
    using a pseudo-command: https://hyperscript.org/docs/#pseudo-commands
  • r
    @User This is the form: 
    <form method="post" action="{% url "form_add" %}" style="display: inline;" id="AddTaskForm" hx-post="{% url "form_add" %}" hx-swap="outerHTML" hx-target="#task-table" _="on htmx:afterSwap log me"><input type="text" name="description"><button type="submit" class="add_btn" name="submit">Add Task</button></form>
    It looks like the log doesn't fire at all (although the form and button work just fine, and the table swaps out)
  • m
    try 
    htmx:afterRequest
  • m
    I believe 
    htmx:afterSwap
    is fired on the target, not the initiator of the request
  • m
    (this should be better documented)
  • m
    I think otherwise your hyperscript is pretty close
  • m
    (this is one big problem w/ event-driven programming: the ol' why didn't this event fire problem)
  • m
    Copy code
    html
<form ... _="on htmx:afterRequest reset() me"> ...
  • r
    hmm 
    htmx:afterRequest log me
    doesn't seem to fire either, I also tired 
    htmx:afterRequest log 'test'
    and nothing showed up in the log. Once I've got a few of these things sorted out the library seems great, easy addition for a few more interactive bits and pieces. In this case I probably should have just left the form submitting the whole page, but it seems better to get this sorted out.
  • g
    on htmx:afterSwap from maybe?
  • r
    Not sure, I can try it, but it's odd that ever the 
    afterRequest log 'test'
    doesn't seem to fire
  • m
    Yeah, that's not good
  • m
    what version of htmx are you using?
  • m
    try using the 
    monitorEvents()
    method from the console in Chrome to see what events are firing on the form:
  • m
  • m
    Copy code
    js
  monitorEvents(document.getElementById("myForm"))
  • m
    has to be done in the console
  • m
    that will print out all the events set to your form
  • m
    (insane that this isn't part of the standard DOM API)
  • m
    i appreciate you taking the time to work this out
  • m
    if only for the exercise of seeing what the issue is
  • r
    Happy to get it sorted, I'm sure it will be one of those ridiculous things in the end, but handy to have sorted.
  • r
    Running 1.4.1, so running monitorEvents only returned a lot of pointer/mouse events, it correctly displayed the change events for the inputs and the submit, but nothing else
  • r
    It's very strange everything else is firing, and that htmx is working, but that the htmx:afterRequest (or afterSwap) won't fire
  • s
    django-autocomplete-light uses MutationObserver to detect if a new autocomplete inputs get inserted into the page. I can confirm that the initialize() method gets called via the MutationObserver. While debugging the initialization step-by-step, I see hat the init was successfull. But finally the good looking element seems to be replaced by the un-initialized version. Here the JS init function: https://github.com/yourlabs/django-autocomplete-light/blob/master/src/dal/static/autocomplete_light/autocomplete_light.js#L138 Has someone an idea why this fails if the new input gets inserted by htmx?
  • m
    i will put together a regression today so we can get to the bottom of it
1...297298299...1146Latest