https://htmx.org logo
Powered by
# htmx-general
  • e
    Thanks
  • a
    Thank you so much for highlighting this “gem” 😂. Plenty of those TBC’s in there still 🙈 Guess I could take out most of them by now: >>> None. No direct equivalent functionality exists (TBC)
  • d
    Hi all, hopefully this is not too off-topic, I’m starting a new work project, an internal web application. Think “single pane of glass management tool”. I’m looking for recommendations on CSS frameworks. In particular I’m looking for function over form. I’m really a backend guy, so this is not really my area of expertise 🙂 I’d really like to avoid anything that requires some sort of npm style “build” process (that whole mess is how I came to htmx in the first place 🙂
  • b
    Ello, I think this might be more on-topic in #941815579440992337 as similar questions led to its creation.
  • d
    Thank you @User . I don't know how I missed that, will post in there.
  • b
    Thinking out loud: if I put an 
    hx-get
    on a table column header that lets me sort a table then is there any scope for htmx to do something fancy like see that the mouse is getting close and fire off the request pre-click and swapping in the response if the user does decide to click?
  • c
    I created this Twitter community for fun, mostly focused on MPAs and HTML driven Devs, join if you want ☺️ https://twitter.com/i/communities/1498395957423136768
  • b
    Doing my first baby-steps with htmx:
  • b
    I'm trying to implement a simple dynamic form. When the user fills out the last input field in a group, I want to add a new empty field. I am currently doing it like this:
  • b
    And the server sends two fields back if necessary. This works, but it the user uses to go to the next field, that happens before the new field is added and the user then has to type Shift-Tab to get back to the newly added field, which isn't a nice user experience.
  • b
    How can I change the focus to the newly added input field?
  • b
    Figured it out: document.body.addEventListener('htmx:load', function(evt) { console.log("target", evt.target); if (evt.target && evt.target.name && evt.target.name.endsWith("_new")) { evt.target.focus(); } });
  • m
    htmx should respect the 
    autofocus
    attribute on the new content: https://www.w3schools.com/tags/att_autofocus.asp
  • b
    Thanks, that works. I didn't try that because I thought I would end up with a lot of elements with autofocus on them - but it's only ever the last one added which matters.
  • m
    yep
  • m
    htmx looks at newly added content and, if there is an autofocus, focuses that.
  • m
    👍
  • s
    I'm trying to set multiple sort and filter query params from a datatable and have hooked into 
    htmx:configRequest
    according to the docs at https://htmx.org/events/#htmx:configRequest "Note that if an input value appears more than once the value in the parameters object will be an array, rather than a single value." But when I try and set multiple values to the same query param in a loop I just get the last value back. Should I be setting the parameter to an array instead?
  • s
    Copy code
    <div x-data="{
  columns: {},

  configureRequestListener(evt) {
    for (let [col, filterStr] of Object.entries(this.search)) {
      if (filterStr) {
        evt.detail.parameters['filter'] =  col + '~' + filterStr;
      }
    }
  }
}" x-on:htmx:config-request="configureRequestListener">
  • s
    Figured it out, yes it was supposed to be an array.
  • m
    There was an article a bit back by github about how the backend was making a comeback, but i can't find it
  • m
    does anyone recall the link?
  • s
  • b
    Anybody using htmx for a longish time and still don't have any extra javascript or hyperscript?
  • m
    That’s the one! Thank you!
  • m
  • m
    relevant
  • f
    Recently I had a task to load a component when its collapsible parent is first opened. Initially I decided I'll try and detect first opens in the collapsible component itself... Wrote a bit of Javascript before remembering that HTMX can react to events once (and/or have outerHTML swapped). So I ended up with this simple beauty:
    Copy code
    html
<div hx-get="{{ url_for('pjax.map_pointer') }}" hx-trigger="collapsible:open once from:closest .collapsible"></div>
  • m
    What a beaut!
  • f
    Thanks!
1...598599600...1146Latest