https://htmx.org logo
Powered by
# htmx-general
  • u
    I have a page that issues 2 different ajax requests, I'm trying to hook into htmx:beforeSend and htmx:afterRequest but my second request is not resulting in an afterRequest event, any ideas?
  • u
    the page is working correctly, my ajax call is succeeding, it's just not firing that event so my update message never goes away
  • u
    does it matter that the button making the second call is added dynamically after the initial page load?
  • u
    well i switched to afterSwap instead and it works so i can move on, but still interested why if anyway knows 🙂
  • n
    I got my form to post comments and then get reset. I wanted to make the new comments fade in and also fade out when deleted. Fading out works, but fading in doesn't seem to be working regardless of whether I use swap or settle. Here's my CSS:
    Copy code
    .fade-me-in.htmx-settling{
    opacity: 0;
  }

.fade-me-in {
    opacity: 1;
    transition: opacity 1s ease-out;
  }

.fade-me-out.htmx-swapping {
    opacity: 0;
    transition: opacity 1s ease-out;
  }
    My comment template that's being returned from the post call has these classes:
    Copy code
    <div id="comment-{{ comment.id }}" class="box fade-me-in fade-me-out">
...
</div>
    Button inside the comment that deletes it and works fine:
    Copy code
    <button class="delete" 
                hx-delete="{{ url_for('posts.del_comment', post_id=comment.id) }}" 
                hx-confirm="Are you sure you wish to delete this comment?"
                hx-target="#comment-{{ comment.id }}"
                hx-swap="outerHTML swap:1s"></button>
    And the form that posts the comment that doesn't work:
    Copy code
    <form hx-post="{{ url_for('posts.add_comment', post_id=post.id) }}" hx-swap="afterbegin settle:1s" hx-target="#comments">
...
</form>
    When I tried to add fade-me-in class to the #comments div which contains all the comments, the whole thing with all the comments faded out and back in when a new comment was posted, but that's not the desired behavior. It looks like the code is not seeing the new comment's fade-me-in class until after it already shows up on the page.
  • m
    The settling css:
    Copy code
    css
  .fade-me-in.htmx-settling{
    opacity: 0;
  }
    is going to apply in the settle -> finish phase
  • m
    And should be on the comment you want faded in
  • m
    let me set up a jsfiddle
  • m
    OK, figured out the problem
  • m
    the .htmx-settling class is applied to the parent element
  • m
    so you can't use that to differentiate between the elements in it
  • m
    so, a few options
  • m
    the class tools extension would let you remove a class and get that fade in effect on a specific div: https://htmx.org/extensions/class-tools/
  • m
    or, if you are adventurous, hyperscript could do this very easily:
  • m
    Copy code
    html
  <div _="on load transition my opacity to 1">
    ...
  </div>
  • e
    just tried htmx with sanic here's my hello world. https://github.com/byteface/htmxtest/blob/master/app.py Is there websockets examples?
  • m
    nice, clean little app!
  • m
    I don't know of any python websocket examples
  • e
    thanks htmx really tidies up a lot. I'd been using callback and writing lots of boilerplate
  • c
    OK, is it possible to unregister an onLoad handler? What I'm seeing right now is that some UI code of mine is getting called on additional time every time every time I navigate away from a page and return to it.
  • c
    I'm registering some event handlers after doing a dynamic import of the code required, and I'm seeing multiple instances of the onclickhandlers getting registered
  • m
    can you post your code?
  • c
    Copy code
    <script>
htmx.onLoad(async (elt) => {
    if (elt.querySelector('#device_details') !== null) {
        // Without this check, onLoad would execute this javascript for every htmx load. We only want this
        // in case of a device details
        let {Device} = await import("{% static 'device_admin/device_mgmt_commands.js' %}")
        let {show_toast, getCookie} = await import("{% static 'device_admin/common.js' %}")

        const device = new Device("{{ manageddevice.id }}", "{{ manageddevice.androidmanagementname }}")
        document.querySelector('#btn_request_logs').addEventListener('click', () => device.request_logs())
    }
})
</script>
  • c
    Example slightly editted for brevity
  • m
    can you stick an html after the triple back tics so it highlights the code?
  • m
    Copy code
    html
  <script>
     example()
  </script>
  • m
    generally, 
    onLoad
    is going to be called every time any content is loaded up
  • m
    it looks like `#btn_request_logs is going to get multiple event handlers added to it given this logic, so something like this makes more sense:
    Copy code
    html
<script>
htmx.onLoad(async (elt) => {
    if (elt.querySelector('#btn_request_logs') !== null) {
        // Without this check, onLoad would execute this javascript for every htmx load. We only want this
        // in case of a device details
        let {Device} = await import("{% static 'device_admin/device_mgmt_commands.js' %}")
        let {show_toast, getCookie} = await import("{% static 'device_admin/common.js' %}")

        const device = new Device("{{ manageddevice.id }}", "{{ manageddevice.androidmanagementname }}")
        elt.querySelector('#btn_request_logs').addEventListener('click', () => device.request_logs())
    }
})
</script>
  • m
    where we test if the new content contains this button, and, if so, wire up the event handler
  • c
    Ah, thnx, I wondered how to do that...
1...374375376...1146Latest