https://htmx.org logo
Powered by
# htmx-general
  • g
    Is that the DOMContentLoaded ?
  • g
    Jquery’s document ready and DOMContentLoaded trigger when the page first runs. I think you’ll want to hook into a different event that’s triggered by htmx when it has loaded the new fragment.
  • g
    Try listening for 
    htmx:afterSwap
    instead
  • g
    window.addEventListener("htmx:afterSwap", (e) => {
  • g
    Doesn't look like that's working
  • g
    No sorry, take two:
  • g
    You don't need to make an event listener, unless you're setting up code that's going to be called later by an event.
  • g
    I don't follow. Are you suggesting just set it up where the select element always dispatches a change event?
  • g
    Sorry.. network issues.
  • g
    Only if you need that change event for something in the future.
  • g
    First, let's get the select2 running on the second fragment.
  • g
    'htmx:afterSwap` wasn't working because that code wasn't there when the event triggered. It would only work if you had installed it on the previous page, which might not be the best way to organize your code.
  • g
    These code snippets are usually put inside event handlers like 
    $(document).ready()
    so that the underlying library can be certain that it has loaded everything before you run your scripts.
  • g
    With htmx, this is less of a problem, because every fragment adds a new layer of HTML to the page.
  • g
    So, you could just do this:
  • g
    That works
  • g
    Just put it in the $(document).ready()
  • g
    Put this code in the second html fragment. It will be run by htmx immediately after the content is put into the DOM.
    Copy code
    html
<script>
$(".mattaddclass").select2({
    theme: "classic", 
    placeholder: "Select Material",
});
 
$('#matvalsearch').on('select2:select', function (e) {
    $(this).closest('select').get(0).dispatchEvent(new Event('change'));
});
</script>
  • g
    Yep, that works. Thanks Ben
  • g
    Ok, cool. As always, there are a thousand ways of doing things, so a lot depends on the rest of your app and what you're comfortable with. Let me know if you have other questions. Hopefully htmx makes this whole process easier 🙂
  • g
    I've enjoyed it so far. Just getting over these little hurdles every now and then
  • g
    This discord has been very helpful
  • g
    Yep. Htmx is a big change from the way we're used to doing things. It probably isn't for everyone (is anything?) but it's been a game changer for me, personally.
  • b
    I have one that loads the contents of another when it is changed. I’d like that second to fire it’s target when the first changes it’s contents. I’ve tried load and change triggers on the second but it never seems to get fired when it’s s change. Any ideas?
  • g
    Any idea how to use htmx:afterRequest to reset a form?
  • d
    I'm using sse to show search results - the search request "fans out" to multiple requests on the backend, which all return at "random" times. However I do know when I have received all results - at that point I'd like to close the sse connection. I searched here and it was mentioned to do that with some hyperscript, presumably altering the div containing the 'hx-ext="sse"' - is that the idiomatic way? If I just close the connection on the backend it seems like htmx will keep restoring it.
  • g
    Yes, SSE support in htmx is declarative. So if you have an SSE attribute in your code it will try to keep the connection open. For more granular control, you might look at SSE support in hyperscript. It’s very similar code, but it gives you more access to the internals, like a 
    close()
    method.
  • g
    That will be a JavaScript event handler. You could also write it a little more quickly in hyperscript. Something like 
    on htmx:afterRequest set myForm to the closest <form/> then reset() the myForm
  • d
    of course - I didn't even think of that approach - thanks!
  • c
    If I can get all the functionality I need from HTMX, Hyper, Django, and HTML and CSS. Why would a person want to try to run node or react? I’m still trying to figure out why we aren’t going the simple route. Like this is so simple!
1...605606607...1146Latest