https://htmx.org logo
Powered by
# htmx-general
  • m
    Copy code
    send doIt to #messages
  • t
    great 👍 , will try it later
  • t
    also, what's the htmx alternative for turbo link behaviour btw?
  • g
    hx-boost
  • m
    generally htmx is more explicit than turbolinks: you encode the actions more directly in the dom. hx-boost is the way to make anchor tags and forms automatically do "the thing they would normally do, but w/ ajax" but it doesn't try to be as transparent as turbolinks, which does stuff like pulling CSS links out of the headers, etc.
  • s
    First django templates hide exceptions, by silently rendering an empty string. Second: they are in a different file. I want things to be near to each other. I like to create HTML with Python, but have not found my preferred way yet.
  • g
    the first is configurable but also generally desirable behavior. the second, sure. but the larger the project the worse that pattern will be, making files very very long and unwieldy. but to each their own!
  • t
    also looked at "magical" unpoly and let me tell, it's not really capable of doing the same thing, yes it can do popups and modals with links, but when it's on the same page it's kinda useless
  • t
    or maybe the docs are lacking
  • f
    Sure! What I want to achieve is to disable htmx in the with id="disable-htmx-in-this-td-and-its-children" 10514 Video 5b432f9-d7fa-4998-9cce-552b429da22f.mp4 00:01:28.441 400 x 224 23 MB
  • m
    Copy code
    html
<tr hx-trigger="click" hx-target="#ic-js-block" hx-get="/media/ajax_preview/aDK1AX1ebVsGDX1XDM3ZtJb9Lo0AnMhzkKrGezd6tm9J5opGE6I1XqJWrMY0s5zjZgaqypTaMQBYVGEmUrqaWxoYZDTb8byMYwYW">
    <td>10514</td>
    <td>Video</td>
    <td><img class="img-thumbnail" src="data:image/jpg;base64,/9j//gAQTGF2YzU4LjkxLjE"></td>
    <!-- icon image -->
    <td>5b432f9-d7fa-4998-9cce-552b429da22f.mp4</td>
    <td>00:01:28.441</td>
    <td>400 x 224</td>
    <td>23 MB</td>
    <td nowrap="nowrap" id="disable-htmx-in-this-td-and-its-children">
        <button type="button" name="604b933dbda80" id="604b933dbda80" onclick="window.location.href='/media/edit/10514'" title="Edit"><span class="fa fa-edit "></span> </button>
        <button type="button" name="604b933dbdced" id="604b933dbdced" onclick="if (!confirm("Are you sure?")) { return false; } else { window.location.href='/media/delete/10514'; }" title="Delete"><span class="fa fa-trash-alt "></span> </button>
    </td>
</tr>
  • m
    so you want the request to go on a click anywhere except the buttons, correct?
  • f
    Yes. Correct.
  • m
  • m
    we can use the trigger selector here I think
  • m
    excuse me, I mean 
    target
    selector
    Copy code
    html
<tr hx-trigger="click target::not(button)" ...
  • m
    the syntax is 
    target:<css selector>
    where I think 
    :not(button)
    is what you want (my css-foo is middlin')
  • u
    I have a question. Here's the page:
    Copy code
    <div id="logs" data-hx-get="/getlogs" data-hx-select="#logs" data-hx-trigger="checkerActualRequest" data-hx-swap="outerHTML">
    Here be logs
</div>

<button type="button" data-hx-post="/api/somelongtask" data-hx-target="#target" data-hx-swap="innerHTML">Do Post
</button>

<div id="target"></div>
    After I press the button, and after POST request is done and response is recieved, there is also a header in the response:
    Copy code
    HX-Trigger: checkerActualRequest
    Expecting behavior: #logs container is triggering itself, getting the data into that container. But nothing happens instead. What am I missing?
  • m
    It's because 
    checkerActualRequest
    is triggered on the document, not on 
    #logs
    . I think you can make it work with: 
    data-hx-trigger="checkerActualRequest from:body"
  • u
    Nope, still nothing happens 😦
  • m
    that should work
  • m
  • m
    can you slap a monitorEvents on the body and see if the event is firing?
  • u
    Let me see...
  • u
    monitorEvents() is not defined - probably because I'm in Firefox?
  • u
    Aha, now it works
  • m
    ah, yeah, can you use chrome for a bit?
  • u
    It works with alejandros' solution, indeed
  • u
    Where I can read more about that additional stuff like 
    from:body
    modifiers? I thought that just a custom event name would be enough >.<
  • m
1...182183184...1146Latest