https://htmx.org logo
Powered by
# htmx-general
  • u
    Could you share some example? Seems that I'm getting the same behaviour even with the 
    hx-trigger
    in place.
  • m
    @User are you sure you are calling 
    formElt.submit()
    ?
  • m
    I'm pretty sure that doesn't trigger the 
    submit
    event
  • a
    Nevermind... this is why it works šŸ¤¦ā€ā™‚ļø 
    htmx.trigger(form, 'submit');
  • a
    @User ā˜ļø sorry
  • s
    Hi all. I'm new to htmx and wanted to use/try it on a simple website I'm working on. But, I don't quite seem to get it working quite how I wanted/expected. Basically, I want some simple pagination and sorting options for a table. I got the pagination working, but adding the order-by causes some issues that I'm not sure how to solve. Specificially: - The order-by is a dropdown select. How do I sent the selected value as (query/url) parameter with htmx? - How do I remove the 
    ?page=n
    parameter when I select a new order-by option, but keep the 
    ?order-by
    parameter when going to a new page?
  • g
    When you change the sort-order select box, youā€™re probably reloading the whole table at page 1 again. Thatā€™s probably as simple as putting an 
    hx-get
    on the form, and using 
    hx-target
    to overwrite your table with the results.
  • g
    On each page of results, just include the 
    order-by
    query parameter on any links you make from that page.
  • g
    Does this make sense to you?
  • s
    Yes, when changing the order-by I can simply do 
    hx-get
    to reload the table (though I still also have the first issue mentioned above). That works fine. The other way around though: how do I include the order-by value when sending a request from a page-button? At least, I could do it from the template side of things (Django) I guess, but that sounds kinda hacky and overly complicated haha. But, maybe that's related to the form you mentioned. My pagination buttons and order-by dropdown are not in a form. They're just... buttons and a dropdown which have 
    hx
    attributes šŸ¤”
  • s
    If that all makes sense šŸ˜…
  • g
    Yes. When your server responds with page 1, all the links would look like 
    <a hx-get=ā€œ/server?page=2&sort=nameā€ hx-target=ā€œ#resultsā€>Page 2</a>
  • g
    It may feel weird at first, coming from client side JS, but it puts your server in the very powerful position of controlling everything that happens on the browser. Itā€™s "Hypertext as the Engine of Application Stateā€ (HATEOAS) and itā€™s the building block of REST and htmx
  • s
    šŸ¤” Hm, sounds logical when you put it like that. I'll take another look (but from a different 'angle' I suppose). Thanks! Still leaves me with the dropdown issue though. Happen to have any insights for that too? šŸ˜…
  • g
    Good. Iā€™m glad itā€™s making sense.
  • g
    For the drop down, just use 
    <form hx-get=ā€œ/serverā€ hx-target=ā€œ#resultsā€>
    and donā€™t send a page number. The sort order will show up as a URL parameter, then your server can default the page to 1.
  • g
    Voila, whenever you change the sort order, youā€™re back in page 1.
  • g
    Once you have this worked out, check out infinite scrolling. Htmx does a great job of this, and thereā€™s a nice demo on the website.
  • s
    My dropdown isn't in a form though. That seemed unnecessary. I thought there'd be a way to put 
    hx-get
    directly on the tag and maybe do something fancy with 
    hx-vals
    that it would pull the selected value from itself or something along those lines.
  • s
    I guess I can put it in a form though, might have to rework it a little bit.
  • h
    is there an event "after we've created html nodes but before we've made them visible"
  • h
    beforeSwap
  • h
    I think
  • g
    Yeah, there are lots of ways to skim it. Whatever is going to be cleanest for you. You might try the hx-get on the select itself, but it just makes more sense for me to read it on a form.
  • s
    Well, the hx-get on the select itself works fine, it's just that I don't know how to get and pass on the selected value
  • g
  • h
    if I have a listener on load and beforeSwap, they'll both get called right
  • g
    Yeah, than makes sense. Look up 
    hx-val
    , and consider doing it in the form šŸ˜€
  • g
    Yes. Each event is its own thing, and the event handlers should both get called. If theyā€™re not, then double check that the first event handler isnā€™t cancelling the event somehow.
  • h
    sorry backing up and asking what I am really trying to figure out - I am using pettie vue and have a global store, if I htmx something in that uses the global store I get a flash of template strings before the load event happens and tells vue to pay attention to the new html
1...435436437...1146Latest