https://htmx.org logo
Powered by
# htmx-general
  • s
    It is really fun. As soon as you ask a question which has no easy answer, people down-vote your question: https://stackoverflow.com/questions/67313479/make-parsefromstring-parse-without-validation
  • m
  • m
    posted on stack overflow, but we handle this in htmx by wrapping and unwrapping the elements
  • n
    Just watched the launch of the beta of Remix a framework for React.js and they showed a demo of Todo list with an optimistic UI. That means that when you submit a request, they update the UI immediately without waiting for the response from the server. So I tried to recreate that using htmx and to my surprise I was able to make it work.
  • n
  • n
    notice the disabled checkbox and delete button while the request is in flight
  • n
    it was fun
  • b
    @User Is this purely HTMX, or does it also use _hyperscript? Either way, pretty cool. Does it behave properly if the backend returns an error, or if there's no response?
  • b
    --- Back to yesterday's discussion of Select2 ( @User @User @User ) I came across this stackoverflow q/a from 3 months ago while looking for something else today. The user answered their own question with a chunk of js. Is there an equivalent _hyperscript approach that could be used here? I'm not versed enough in _hyperscript to know, but I'm interested.
  • m
    very cool!
  • m
    what does the javascript look like?
  • b
  • m
    Copy code
    <script type="text/hyperscript">
  on select2:select
    send change to the closest <tr/> 
                to the target of the event
</script>
  • m
    might work
  • m
    I don't know how $(this) works in jquery
  • m
    Copy code
    html
<script>
 window.addEventListener("DOMContentLoaded", (e) => {
  $('select').on('select2:select', function (e) {
   $(this).closest('tr').get(0).dispatchEvent(new Event('change'));
});
 })
</script>
  • m
    being the modeled javascript
  • m
    wait a sec
  • m
    that won't work at all
  • m
    lol
  • m
    jquery apparently has its own event handling mechanism?
  • m
    I really don't know
  • m
    Copy code
    html
<script type="text/hyperscript">
  on select2:select
    get the closest <tr/> to the target of the event
    send change to it
</script>
  • m
    maybe more readable?
  • n
    It does use some hyperscript and it does not take care of all cases like error handling or multiple request in flight at the same time, but it should not be very hard to get it behave properly. To be honest it does feel like this very near the limit of what it would make sense to do with this approach. Here's the hyperscript code, I'm a noob in hyperscript so it might need some improvement... https://github.com/gcollazo/htmx-demo/blob/main/todo/templates/partials/form.hbs
  • m
    Maybe use this approach to convert all the select2 events to native events https://github.com/select2/select2/issues/1908#issuecomment-780893950
  • r
    is there a best practice (besides "don't do it") for triggering multiple updates with one action? Context: I have a page that displays a list of search results with filtering facets. I need to add a "Clear" button, that a) clears the facets b) reloads the search results. The only easy way I can think of is to have both the facets and search results HTML be returned by the same endpoint, but that's basically reloading the whole page. Is there a better way?
  • b
    Thanks for sharing this!
  • m
    I would target the entire page with the reset button and rerender that entire bit of HTML
  • m
    That seems the least complicated to me
1...232233234...1146Latest