https://htmx.org logo
Powered by
# htmx-general
  • c
    Hmmm, I see that my htmx.onLoad() function gets executed for every new htmx element I request. Is it possible to register a function to be executed for just the one load of an element and then de-register it? I could have sworn to have seen something like this but I cannot find it again...
  • m
    how do you mean? Can you give me a little more context. 
    htmx.onLoad(function(elt){ ... } )
    is called on each element that is added to the DOM, and you typically write code against the passed in argument to, for example, initialize a js library in that new part of the dom: https://htmx.org/docs/#events
  • m
    A start on a 
    disable-inputs
    plugin for htmx: https://twitter.com/htmx_org/status/1443227171602911235
  • g
    heyyy my lovely htmx squaddd
  • g
    help me out here, for a sec, and ill be eternally grateful!!!
  • g
    whats the best way to build something like a timer
  • g
    without using JS
  • g
    link obv we dont want server side rendering for something like that
  • g
    but ew JS
  • g
    use another language that compiles to JS
  • g
    maybe _hyperscript, though that doesn't really compile
  • m
    That sounds pretty front-endy which isn't going to be htmx's strength so yes, hyperscript or just biting the bullet and using JS sounds like the right thing.
  • m
    next htmx release will give you fine grain control over how responses are handled: https://twitter.com/htmx_org/status/1443316447942348805
  • m
  • n
    Hi all! I'm using HTMX to post a form and then place the result in another div. Is there a way to clear the form so it can be used again?
  • m
    You probably want to use the 
    htmx:afterRequest
    event to call 
    form.reset()
  • m
    there are many ways to do that, depending on if you want to use vanilla javascript, alpine, jquery or hyperscript...
  • n
    I'll read up on HTMX events then. I haven't had to use them yet. I have jquery in other spots, so I'll try to go with that. Thanks!
  • m
    Copy code
    js
$("#my-form").on("htmx:afterRequest", function(e) {
  $(this).reset();
})
  • m
    something like that
  • n
    Thank you.
  • s
    What about Alpine, I'm not on computer, by I get curious
  • m
    Not an alpine expert, but something like this:
    Copy code
    html
  <form x-on:htmx:after-request="this.reset()" ...>
     ...
  </form>
  • m
    hyperscript:
    Copy code
    html
 <form _="on htmx:afterRequest call my reset()" ...>
     ...
 </form>
  • m
    next release of hyperscript:
    Copy code
    html
 <form _="on htmx:afterRequest reset() me" ...>
     ...
 </form>
  • s
    I will celebrate the day, when google understands this simple query: "htmx error handling". Up to now google thinks this is a typo and "corrects" it to "html". At the bottom of the google result page there is a "feedback" link. I gave them feedback, maybe this helps.
  • b
    I really like htmx’s name, however, that’s true that it is not super SEO friendly, and I am not sure that is curable..
  • g
    Python moment...
  • m
  • u
    Copy code
    <div class="col-md-12">
    <div class="row">
        <input style="width:100%" autocomplete="off" id="filter" hx-post="/property/deactivateFilter" hx-swap="innerHTML" name="filter" hx-trigger="keyup changed delay:1000ms" hx-target="#search-results" hx-include="[name='filter']" class="form-control" />
    </div>
</div>



<div id="search-results-container">
    <div id="search-message" class="loading" style="display:none">Searching</div>
    <div id="update-message" class="loading" style="display:none">Updating</div>
    <div id="search-results"></div>
</div>





// search results populated from /deactivateFilter, form omitted

 <button type="submit" hx-post="/property/deactivate" hx-swap="innerHTML" hx-target="#search-results" hx-include="[name='filter']" class="btn btn-primary">Submit</button>




 <script>
        htmx.on("htmx:beforeSend", function (evt) {

            switch (evt.detail.pathInfo.path) {
                case "/property/deactivateFilter":
                    {
                        $("#search-message").toggle(true);
                        $("#search-results").html('');
                    }
                    break;
                case "/property/deactivate":  // this does hit
                    {
                        $("#update-message").toggle(true);
                        $("#search-results").html('');
                    }
                    break;
            }


        });

        htmx.on("htmx:afterRequest", function (evt) {

            switch (evt.detail.pathInfo.path) {
                case "/property/deactivateFilter":
                    {
                        $("#search-message").toggle(false);
                    }
                    break;
                case "/property/deactivate": // this never hits
                    {
                        $("#update-message").toggle(false);
                    }
                    break;
            }
        });

    </script>
1...373374375...1146Latest