that seems more like a styling/CSS issue than an htmx issue, but maybe I'm not understanding?

Hi. Is the HTMX VSCode extension still being developed?

I agree, that sounds like mostly a CSS issue. For the inner contents, though, there are a couple options I can see, the merits of each being decided by how often you're planning to reuse the button, and how wide those variances will be. I'd be happy to offer some suggestions and tell you how I've solved this problem in my projects. Go ahead and start a thread from this message if you're interested

Anyone by any chance know how to make Select2 work with Htmx? Referring to problem above

Seems like a really nice use case to have with Htmx. For example, have a multi-select field change depending on values selected in another multi-select

Hello. Is it possible in the

hx-include

attribute to use "closest tr" with other CSS selectors? This works:

hx-include="#filter,#sorter"

This doesn't:

hx-include="#filter,#sorter,closest tr"

yeah

closest

isn't a valid CSS selector, so mixing and matching like that won't work, unfortunately

ok no biggie. just will use the id on the row

The only thing I see wrong here is using jQuery to init the select2

just checking

that should be done in

htmx.onLoad()

instead, so new content is processed correctly

not sure what events select2 fires, but assuming the standard

change

event is what's triggered, it should work

I have a div with

hx-trigger="change changed from:#start_date

and am struggling to get it to trigger. Here's the JS code in an event listener for a custom component I expect to trigger it:

javascript
const startDateInput = document.querySelector('[name="start_date"]');
startDateInput.value = isoDate(event.firstDay);
startDateInput.dispatchEvent(new Event("change", { bubbles: true }));

If I remove "changed" from the trigger it fires. does the "changed" in this case mean the div's value changed or the target has changed? because the target is definitely changing

changed refers to the current element, not the triggering element

this is arguably a bug

ahh yeah makes sense - I got it to work by wrapping the event dispatch with my own change detection

but agreed that does seem like a bug in the presence of the

from:

modifier. if I'm listening to another element's

change

i probably don't expect my value to have changed

i think ideally htmx would default to the from: element, and support a colon syntax for changed to allow extended CSS selectors too, e.g.:

from:#foo changed:me

Would you be so kind to provide a minimal working example that implements the htmx example but with Select2?

Looking for some help on updating the address bar. This page at `example.com`:

<form hx-get="/query" hx-target="#result">
  <input type="text" name="qt" value="<%=params[:qt]%>">
  <input type="submit" value="Submit">
</form>

When the form is submitted with the query text (

qt

) of

foo

I want to update the url to (and add history item for)

example.com/?qt=foo

so that the link can be shared and

qt

is automatically populated. This is what I've explored: -

hx-push-url="/?qt=...

but I can't see how to include the dynamic value -

hx-push-url="true"

but this understandably uses the path

/query

and that's not what I want - hyperscript, I can't find anyway to update the address bar and history with hyperscript but might have overlooked it? I saw this comment from 1cg https://discord.com/channels/725789699527933952/725789747212976259/1069440045385265213 but I'm unsure if that would work for my use case and interested to see if there's a simpler method that I've overlooked.

easiest thing might be to compute the URL you want and return it via the

HX-Push-Url

response header

Perfect, that's done it. Very nice.

I'm looking for suggestions on how I can extend the Active Search example (https://htmx.org/examples/active-search/) with more features such as filtering and sorting. Let's say I want to be able to sort the "First name" and "Last name" columns, e.g. by adding an image/icon to the right of table header that you should be able to click. The click then triggers a request to the server, including the text that is currently present in the search input field. One idea that I have is add hx-get and hx-include to each

th

, something like this:

html
 <th id="firstNameHeader"
     hx-get="/search?sortBy=FirstName&order=asc&source=firstNameHeader"
     hx-target="#search-results"
     hx-trigger="click"
     hx-include="[name='search']"
     hx-indicator=".htmx-indicator">
        First Name <i class="bi bi-arrow-down-up"></i>
</th>

In the response, I could then return the "search-results" fragment, but also include the "firstNameHeader"

th

fragment and replace it using an

hx-swap-oob

. The reason for doing this would solely be to change the

order

in

hx-get

to

desc

, i.e.

hx-get="/search?sortBy=FirstName&order=desc&source=firstNameHeader"

. While this would probably work, it becomes complex quite fast if there are additional filters, such as a new drop-down where you can select a "country" etc, while retaining the sort functionality. Is there a nice way to achieve this in pure HTMX, or is it better to resort to some javascript in these cases? I'm thinking that the javascript in this case, would probably append the various filters and sort parameters to the search uri dynamically and then trigger the request. But I would like to avoid this if there's a clean way to do it with HTMX.

If possible, I would wrap the whole table in a

<form hx-get="/search" hx-target="#search-results">

tag - this will automatically include the search field (and any other regular inputs you happen to use later). Then, you can use the

<button type="submit" name="sort" value="FirstName" />

for your column sorting - a standard button that will submit the enclosing when clicked. I tend to prefix sort column names with a

-

when it should do descending order, to avoid needing a separate

order

parameter. So in this case, your server response will instead use

-FirstName

as the value, so when clicked it will go the other way. On the server side you would check if the first character is a

-

to decide on applying your asc/desc option, and if yes, trim it off the start.

Thanks craig, interesting approach. When you say: > your server response will instead use -FirstName as the value Do you mean that the response from the server should include entire table, including the buttons, search input field etc? Also, (and sorry if this is a basic question) I want to have an icon instead of a button, but do you mean that you could style the button somehow to look like an icon?

Got it working now after I added this piece of code:

js
htmx.onLoad(() => {
   $("#collection-select").select2({
      theme: "bootstrap-5",
      closeOnSelect: true
   });
});
window.addEventListener("DOMContentLoaded", (e) => {
   $('select').on('select2:select', function (e) {
      $(this).closest('select').get(0).dispatchEvent(new Event('change'));
   });
});

Required both onLoad and the solution from SO https://stackoverflow.com/questions/65658432/select2-change-event-does-not-trigger-htmx

seems like you could use

hx-trigger='select2:select'

to avoid neeeding to add that second event handler

it's too bad they don't use the standard change event 🤷‍♂️

I would also write the

onLoad

handler like this:

javascript
htmx.onLoad((newContent) => {
   $(newContent).find("#collection-select").select2({
      theme: "bootstrap-5",
      closeOnSelect: true
   });
});