With how it is now, there is no need to get all items from the database if you are adding 1 item.

But, if you would do it with the full list, there would be the advantage that you are sure you are up to date with other changes that might have happened (in another browser tab for example )

Thanks for the input! I’ll try with moving the attributes later.

yep, no prob!

thank you for working through the problem w/ htmx!

Some questions about 1.6.0: 1. What does “much better script support” mean? 2. Where is the documentation for “unset”? I can’t seem to find it? 3. Is there perhaps an example on how to use the

htmx-added

class in a transition?

1. If you include a

<script src="/foo.js"/>

tag, it will now load (previously we only evaluated inline scripts)

2. Er, I'll write some. Basically you can use the value

unset

to "cancel" an attribute that would normally be inherited:

html
  <div hx-confirm="Blah blah" ...>
      <a hx-confirm="unset" ...>No Confirm</a>
  </div>

3. Yes, I updated the settling animation to use `.htmx-added`: https://htmx.org/examples/animations/#settling

It's nearly identical to

.htmx-settling

but is added on the newly added content, rather than the target:

html
  <a hx-get="/example' hx-target="#div1">...</a>
  <!-- this div would get the .htmx-settling class -->
  <div id="div1">
    <!-- these ps would get the .htmx-added class -->
     <p> Some Content...</p>
     <p> Some More Content...</p>
  </div>

NB: in the case of

hx-swap='outerHTML'

the target and the added content are the same 🙂

I really need an illustrator for the htmx docs 😑

☝️

Thanks @mysterious-toddler-20573! That all makes great sense 🙏

lol i did the todos in a v weird way

lemme show youu

(my comments dont mean anything pls ignore)

What I just discovered is that somehow HTMX does 2 requests and I have no clue why. Let me try to explain what I notice: 1) hx-trigger="keyup[key=='Enter']" -> Triggers the POST request to the server 2) The server sends back

HX-Trigger: itemAdded

response header 3) On a different place on the page, I have this:

<span th:fragment="active-items-count"
      id="active-items-count"
      class="todo-count"
      hx-get="/active-items-count"
      hx-trigger="itemAdded from:body">

So HTMX does a GET request upon receiving the

itemAdded

response header But if I check the developer console the GET to

/active-items-count

is done 2 times. I also added

htmx.logAll()

but I only see 1

itemAdded

event being logged. Is there anything else I can look at to see why the GET is done twice? I am using version 1.5.0.

are there two active items?

like one from before, and one added?

It does not happen the very first time indeed if there are no todo items yet. After that, it is always 2 times, no matter how many todo items there are.

can one request include multiple items?

No

okay, weird, idk then man, ill try n help tho

is any more of the code related to this specific request?

No, that I can think of

You can view the code at https://github.com/wimdeblauwe/blog-example-code/tree/feature/todomvc-htmx/todomvc-htmx

Another question I have is on

hx-boost

. I just noticed that I can replace all my custom stuff in my blog post with just adding this attribute and I have an SPA instantly! The only place where it does not work is where a checkbox triggers a form via JavaScript:

<form th:id="|toggle-item-form-${item.id}|"
                th:action="@{/{id}/toggle(id=${item.id})}" th:method="put">
            <input th:id="|toggle-checkbox-${item.id}|"
                    class="toggle" type="checkbox"
                   onchange="this.form.submit()"
                   th:attrappend="checked=${item.completed?'true':null}">
            <label th:text="${item.title}">Taste JavaScript</label>
        </form>

(The

onchange

attribute) Could I code this in a different way so that

hx-boost

would work here as well?

(whats an SPA?)

i cant find anything in your code that looks like another get req