It used to be stencil based, but now, components are built with LitElement (https://lit-element.polymer-project.org/)

bumping my own question because I want to fix a bug in htmx that is blocking my development but I can't run the htmx tests to verify my fix 😦

I think the shadow dom might hide the attributes from htmx? Can you add a process call to the init of the component?

Here is a demo of the bug I'm running into https://codepen.io/reedspool-gh/pen/PoEEYWm I have a fix for it but I don't want to PR the fix without having run the tests.

Will look tonight folks

Any chance we could get a channel for #node-htmx or #express-htmx? 🙂

I will ask this in Shoelaces’s channel, as their docs don’t mention any event for when the components are initiated. But yes, I suspect the same, but I’m not very versed. I’ll post here what they answer on this regard.

I know this is off topic, but does anyone run a plex and/or Jellyfin server? I am getting pretty annoyed at plex and thinking of switching and I'm curious how that's gone for anyone else

So I think my issue with the Shoelace components is solved for the moment. Thanks to @User, @User , and @User for your input. In case someone needs it, this is what I did: 1. add htmx attributes and a reference class to the component --as needed, not all components need to be htmx aware.

html
<sl-icon-button 
            class = "htmx_trigger not_ready"
            library = "ma_icons" 
            name = "ma_search" 
            hx-trigger="click"
            hx-get= "/search"
            href = "/search" 
            label = "search"></sl-icon-button>

2. Remove the component's default behavior, and whenever a new page loads (via htmx) call the same function again so that any component embedded in the loeaded html, is prevented from doing its default behavior either.

js
// Removes default behavior
htmx_aware = () => {
    const sl_elements = document.querySelectorAll('.htmx_trigger.not_ready');
    for (let i = 0; i < sl_elements.length; i++) {
       sl_elements[i].addEventListener('click', e => {
          e.preventDefault(); 
          e.target.classList.remove('not_ready');
       }) 
    } 
  }
// called once, when very first page loads
htmx_aware();

// called whenever a new page loads via htmx
body.addEventListener("htmx:load", function (evt) {
    htmx_aware();
  });

Would you recommend against using htmx if you were to build a website that may later need to have a native app version (e.g. with react native)?

I don't know if the extra

}

character at the end of the button declaration is throwing anything off; it was in both of your examples. You might also want to see if the

preventDefault

type of thing that was discussed yesterday (surrounding buttons and behaviors like this) may also be causing the problem you're seeing.

Hello HTMX community. First of all "thank you" to the authors of htmx package. I would like to use htmx for my Django project. There's a model with product variants, like size, material, color (color/material are Django ForeignKeys) etc. I store all available product variants in Product model. User would use form with chained select fields. Depending on the selection of the first select field, second one is filed with available values. Depending on the second select value, third select is "generated"., and so on.. All selects relate to the same Django model (specific fields). The problem is that if user fills the form without submitting it, and changes his mind, and changes the second select, the third select should be filled with option values, but fourth and the rest of the selects should become blank with no options available or hidden. I would like to ask what would be the strategy for this ? Maybe some of you have already had the same problem? Should I render the part of the form (with 2,3,4 or more selects) depending on which select field was modified or clear selects with JS on change? There's an example on htmx page, but it simplified. Only 2 fields, the first one filled with initial value, and the second one depending only on the one field. Asking only for frontend /htmx behavior, not the Django views/usage etc. Here's the description: https://gist.github.com/rtpm/2ac1370d03728573ba275d75281c1f98

Hi Albert, hard to give a general recommendation, but a proof of concept htmx site might be appropriate to get validation of your idea, later porting it to react and react native if necessary

i think that example generalizes to any number of drop downs

What is the best approach to implement the following: a parent form and child forms within the parent form.

For example: Allowing the user to select from a drop down and generate additional form fields depending on their selection. This would be the child form in the parent form

if you can render the child forms server side it's pretty easy to put some hx attributes on the dropdown that will trigger loading + inserting the child form

I can load what I need if I put the HTMX attributes in the select form only. But I would like to trigger it with a button

https://htmx.org/attributes/hx-include/ ?

Hello everyone, and thanks for this wonderful library. I was presenting the solution to some colleagues and/or developer friends, but sometimes I get "this would change a too much my way of working" or "this implies too much refactoring in the controllers". I think the

hx-select

attribute needs more visibility to encourage the gradual adoption of htmx since, using it, you can improve your front UX without touching a single line of the backend source code. You can just add an ID at the good place and set it in both

hx-target

and

hx-select

. I'm actually working on a dummy django example project to show the concept. When I finish it, I will post a link here to see your opinions guys. Maybe it was done by someone else before, but I didn't find anything on this.

@hundreds-camera-24900 Thanks! That's it

🙌

Thanks for the reply. Maybe I am missing something in this example. If the form on htmx website would include more selects then select #2 would only care about select #1. Select #3 would depend on select #2. Let’s add engine to the model. There would be maker, model, engine. Engines would be for specific model. This model can only be for specific maker. Let’s change it a little bit. Say there is a car type not a model. (Sedan, van, hatchback) and the engine that can be put into cars of multiple makers. There’s also a 4th select - color. To get available engines, We need to send a query for specific type and model l. Then there are 2 selects left. Engine and color. If we select engine, color list is populated. Should I return the rest of the selects each time select value is chosen ? For example if I choose car type, should I get a ssr response with engine and color ? Or should I query for ssr response for each select so it somehow bubbles? (On change and load events) ? Secondly. If I select the car type value, engines list is populated but color select should not be populated until I select a specific engine. Hope it sheds some light on what I”m trying to achieve.

I would wrap all the dropdowns in a single element and then target it for update from the server side. for a non-GET htmx should include all the options currently selected on a change event and you can recompute the proper state to render to the client

then the logic works the same as if you were doing a full page request: inspect the values selected by the user and render the appropriate HTML

Thanks. That clarifies the view. The last problem is that if i fill the form and then I change the engine .. and there is no such color I will get a color form validation error as it would not be returned if I filled the form again starting from car make and followed the selects. That’s why I would like to make color select empty until a specific engine is chosen. Should I handle this in Django or this could somehow be handled by htmx ?

That should be handled server side in django

Couldn't get this working as nothing was being sent via post (no payload). Meanwhile came with a different solution below: makeX makeY modelx modely engineX engineY colorX colorY This would let me check which "select" has been changed and render the form with the right state ?

hoist the

hx-post

onto the parent div, set the URL to a full path, and add a

hx-trigger='change'

I would also put the div inside the form, so all the selects are included in the request. Finally, I don't think you need

hx-params

as that's mainly for filtering. Here you want everything inside the form.