from a UX perspective

Is there scroll state in the list?

to finish the per-row refresh concept: you'd emit this hyperscript for each row and then the update request on the side panel would return an appropriate event via the

HX-Trigger

response header, causing the row in question to refresh

yes ther is a scroll

OK, so we want to target the inside of the container of the list, so we have two elements that need to be updated

in that case I would have the row buttons target the right hand side UI, and then the right hand side UI target itself (to re-render for errors) and trigger a refresh event for the inner table to listen for,

I would keep it simple and just refresh the whole table, which will still preserve scroll state as long as the element making the request is within the scroll container

but you could also adopt a finer-grained approach by encoding an hx-get per row and then triggering a row-specific event, as outlined above

i've given up. i'll just render the whole list, for now. maybe someone with time in the future will find a solution to this. but i think the best solution for this kind of situation is "HX-Trigger Response Headers" like HX-Get,Post... Response Headers ... maybe it's an ignorant suggestion since I haven't quite figured out htmx yet 🙂

building w/ hypermedia is a different thing than thick-client style apps, it takes a bit to adjust, but I think the solution of refreshing the table will be fine and don't expect you'll have any issues w/ it going forward

Thank's for your help! I guess that strictly requires two separate endpoints, one for the full site with spinner and one for the incremental updates/polling. Or do you see a way to combine that into a single one?

this is how I solved it thanks @mysterious-toddler-20573 and @gorgeous-airport-54386

Anyone know how I can use Select2 bootstrap with htmx to implement this? https://htmx.org/examples/value-select/ For some reason it doesn't seem to work with the Select2 styled select element, only when I use the regular html one. Some code if it may help

html
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.full.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
   <script src="https://unpkg.com/htmx.org@1.8.5"></script>

   <select name="collection" class="form-select "id="collection-select" data-placeholder="Choose Collection"
      hx-get="/some-endpoint"
      hx-target="#test"
      hx-swap="innerHTML"
   >
      <option></option>
      <option>Algoritm</option>
      <option>Holistic</option>
      <option>Solution</option>
      <option>Conglomeration</option>
   </select>

<div id="test">Test123</div>

<script>
    $("#collection-select").select2({
       theme: "bootstrap-5",
       closeOnSelect: true
    });
</script>

Using Flask (Python) as my server, but no problems on that end, because I've been using htmx successfully so far with everything else, so it's definitely select2 related

Would really like to use it because it offers a search option. Using boostrap 5 select2 theme btw: https://apalfrey.github.io/select2-bootstrap-5-theme/examples/single-select/ This one

if you put an ID on the element that is polling, that id will be included in the request

In the code below,

htmx.on

click

works 1 time and then stops working. I may not have seen it due to extreme fatigue, I wonder if anyone can see why?

(function(){
    htmx.defineExtension('set-update', {
      onEvent : function(name, evt) {
          if (name === "htmx:afterRequest") {
            setBodyClasses(evt)
          }
          if (name === "htmx:afterOnLoad") {
            htmx.on("#unset_update", "click", function(evt) {
              unSetBodyClasses()
            });
          }
      }
    });

    function setBodyClasses(evt) {
      htmx.addClass(htmx.find('body'), 'update-On');
    }

    function unSetBodyClasses() {
      htmx.removeClass(htmx.find('body'), 'update-On');
    }
})();

how is the extension being used?

We have a new stack channel, #1069737521522683934 for R programmers who use htmx

I have a file called core.js. and I use it as I have attached here. And calling it by using hx-ext

<button 
    ...
    hx-ext="set-update">update</button>

👋 I am implementing a TailwindUI facet filter, but they clone the form in the DOM to have a sliding mobile menu (see screenshot). So my sprig/htmx input fields are cloned to build up the mobile menu, and the value name is the same... This gives issues of course. When I check a second checkbox, the

name

form values are duplicated for the first checkbox. One value from the regular form, one value from the identical hidden mobile menu:

brands[]="honda,honda,stihl"

. And when I uncheck a checkbox, it doesn't happen, because one form is still sending the checked param value. Is there any creative solution? Ideally I want to ignore form A when form B is clicked; or I should sync the forms in the frontend before the htmx swap happens... Or use unique param names for each form? Things get ugly quick. I tried

hx-sync="closest form:abort"

(but not the right use-case?) and

hx-params

(but param name is the same) and setting

hx-disable

on the mobile menu to disable it when it's not in use, but it still sends its params along.

Hi folks! I'm new to discord and htmx so please let me know if there is a better spot to ask this! I'd like to be able to make an API post call using HTMX - is this possible? I've been having trouble making it work.

<form hx-post="https://some/api/endpoint/">

Submit

Hello, I haven't used this discord server before. OK to just ask a question? NVM, stupid question.

@damp-lamp-34714 and @eager-city-40681 Welcome! @eager-city-40681 - sure @damp-lamp-34714 What's the gap between your expected behavior and what you're currently observing?

I'm having trouble viewing callbacks in VSCode's Live Preview. I'm working with fastapi, and if I interact with it outside of VScode on port 9000, it works great (love htmx). However, I'd love to be able to work with the Live Preview feature. However, Live Preview is on port 3000. If I call the api from this port, it returns the contents of the app directory. I assume this is some kind of issue with CORS. Has anyone been able to work with Live Preview of htmx files which all an api on another port?

BTW, thanks for the welcome Charlie O.

Thanks Daniel! The expected behavior is to submit a user name and email to an AWS API Gateway endpoint, which is pretty flexible right now in terms of what it can capture. I've confirmed I can do the post to the endpoint using a CURL command. When I try to post from this simple web page running locally, I get the error in the console - htmx.org@1.5.0:1 htmx:targetError

No idea here - but there are folks here in all different time zones, and I know we've got some fastapi people who hang out in here.

Ah. The target error is telling you it can't find the element you've targeted. Target can use all sorts of things, but the ID version that you're using is the most straightforward. In your sample above, though, there isn't an element with the

id

attribute of

new-user

. If you're wanting it to put the results of the POST into that element, you'll want to define an empty element in your initial page.

Ah I see thank you for the guidance!