Ooof, I feel for you, @rapid-umbrella-80895. Business requirements include some crazy things, so I get that you may just have to build it this way. But having to build (or even scroll through) 100 tables on a single page sounds like a bad time. This sounds like a great use case for some tabs, or a drop down box in the navigation somwhere. I'm going to bet that htmx will work as well as any other front-end JS library... and maybe better because you're using the browser's parser written in C++ (or Rust) instead of a bolt-on written in Javascript. Still, those results may not be great. Tables are especially expensive because they require some complicated layout calculations. So, do your best to limit the information sent over the wire, and the number of DOM nodes that have to be rendered on every page -- even down to renegotiating the size of this one page with whoever is the business owner / designer.

The way you're describing that sounds like it would be faster to just refresh the whole thing instead of cherry-picking the 3/4 tables for update. Replacing a full section will 4 tables is gonna be faster than refreshing 3 separate tables

Thank you! So the best thing I can do is to replace the whole that includes all the tables, I guess. 👍 In theory, would skipping some tables with django template variables improve the speed? Something like: {% if htmx_update == False %} // every 4th html table, I do not want to update// {% endif %} My assumption would be, that it would take a tiny bit longer time for django to generate the template, by evaluating this extra conditional logic but then htmx would take less time to swap the shorter html content this way. Is this a wrong idea?

the jinja / django template logic is going to be relatively fast, especially with python 3.11+. So yeah, probably a good place to start. Wins here are going to be very implementation specific depending on where the actual bottlenecks are- we can only provide very surface level ideas.

is it possible to narrow the scope of what changes to just the ``s that are in view? seems highly unlikely that the page needs 80 tables all kept up to date. how could anyone view that much data even if you did manage to update it in a good time?

I have a table with rows of data. I have a search input element to filter the rows (filtering is done on server side). The rows also have action buttons (freeze, delete). When a user clicks Freeze the row has to go to the top of the table. My current approach is for the server handler for the freeze button to send the whole table with the rows in the correct order. The handler function for freeze can send all the rows but it won't know the search term to apply the filtering.

How can I preserve the filtering while still reordering the rows when a user presses the freeze button on a row?

a couple different thoughts come to mind 1. use client-side js to "freeze" the rows instead 2. or include the filter parameter in the "freeze" requests as well 3. or use a cookie to track frozen rows, or a cookie to track the filter

Cookies bring in the issue of multiple tabs of the same site not working as you would want it, but the server cannot access a local storage, hm

oh right,

sessionStorage

exists

The filter param belongs to the element which is outside the of the table. I'm not sure how I can access the value of the filter param to pass into the freeze request.

for the sortable users - i have an htmx.onLoad trigger initialising every .sortable element as part of my base template, and this works as expected when hitting a url directly. however, when i swap new content into the body (boosted - so the whole base template is being sent over including the script tags with the sortable init), the swapped in content doesnt work with sortable. do i need to init them again? if so whats the best way to do this with boosted content?

with some further testing, i can get around this by moving away from using boost (so instead of a tags, using buttons, then specifying hx-select/hx-target and swapping the outerHTML)

which is annoying because its a lot more code for more or less the same functionality as using boost

so.. any ideas?

This sounds like it's similar to an issue I was having; check out

htmx:afterSwap

for initializing your new stuff. This is what I wrote up about my page-level vs. htmx init findings: https://bitbadger.solutions/blog/2023/page-level-javascript-initialization-with-htmx.html

thanks, i will take a look

Although, in reading that over now, it looks like I wrote up

htmx:afterSwap

but the code actually uses

htmx:afterSettle

. Let me know what you find - I may need to edit my post!

haha i was just about to mention that to you!

I think the elements should be able to be addressed by the time

htmx:afterSwap

fires; I'm trying to remember why I ended up using

htmx:afterSettle

, but that code was a copy/paste from the project where I used it.

ive jsut tried both actually and still not working - but youve given me a few ideas

You might try running the init in the browser console once the content is there. If it works, there's likely something in the timing/events that's not right. If it doesn't work there, maybe there's something in the content that's being returned that isn't matching what your code is expecting.

ive tried running the init in the browser - it works.. so yeah i guess more investigating needed.. or drop boost

afterSettle was a good call but it still isnt playing with sortable this way, very confused given that it works fine with hx-get

Are you sure afterSettle is being called? Also, if you want it to run after every settle, you'd want to take the "once" stuff off the listener.

theres no once on the listener, and yes its being called - console.log says so

Well, shucks - that's about all I can think of. There are others here who have more experience in that than I do; maybe they'll read this exchange and have some better ideas.

appreciate it 😄

How can I get a

textarea

to trigger an htmx request when the user presses enter? This is what I have so far:

html
<form id="chatbox-submit">
  {% csrf_token %}
  <textarea id="question-text-area" hx-trigger="keyup"></textarea>
</form>

I tried

hx-trigger="enter"

and

Enter

but neither worked. I don't see any examples of using keys in the HTMX docs https://htmx.org/docs/#triggers Bonus, It would be nice if it only submitted when the user presses Enter, but not Shift+Enter. This is how I know to do it in JS

js
const node = chatBox.querySelector("textarea");

node.addEventListener("keyup", ({ key, shiftKey }) => {
  if (key === "Enter" && !shiftKey) {
    // Do things
  }
});

I asked a related question awhile back and I solved it because it seemed like the browser knew that hitting enter was 'submit' ...but that was when I was using an input element. Things broke when I started using

textarea

https://discord.com/channels/725789699527933952/725789747212976259/1079989023482855494

See trigger filters https://htmx.org/docs/#trigger-filters https://htmx.org/attributes/hx-trigger/