I have a Java version that I explain in this blog post: https://www.wimdeblauwe.com/blog/2021/10/04/todomvc-with-thymeleaf-and-htmx/

I think that's a great idea

Just pick Forth

Just checked, and yes, QBasic has networking (sort of)

for whom it may interest.. i solved that problem changing the event to "htmx:beforeSwap" and setting "detail.shouldSwap" to "false" when the status code is different from 200

Hey! Is there any way to conditionally swap. so for example; I have a form. When the form is submitted, if the server returns status code 400, it replaces the element X but if the server returns 200, it replaces the element Y. Would this be possible? Thanks

You could use the

HX-Reswap

header

Err,

HX-Retarget

rather

We use it with middleware to retarget any non-2xx responses to populate an error modal

Oh great!

Okay so weird; when the status code is 200, it works and replaces the correct element. However, when the status code is 400, nothing happens and the form stays the way it is (the Console shows BAD request)

By default HTMX only deals with 200 responses

Are you changing your non-2xx responses to a 2xx response plus a

Hx-Retarget

header?

Yeah

Takes care of things like unhandled errors, validation issues etc. by replacing the 4xx or 5xx response with a 2xx with a HX-Retarget and a server-rendered modal

or you could keep 4xx/5xx codes for errors (idiomatic HTTP) and write a tiny bit of custom JS to swap in their error messages on the page

or even get htmx to do it

I do this, and it's super reasonable, but I have occasionally wondered if there's some idiomatic way to make that functionality available in a more declarative way

js
document.addEventListener('DOMContentLoaded', function () {
  document.body.addEventListener('htmx:beforeSwap', function (evt) {
    const status = evt.detail.xhr.status
    if (status === 400 || status === 500) {
      // Stops the error from logging in the console
      evt.detail.isError = false

      // Create an error dialog box
      const errorDialog = document.createElement('div')
      errorDialog.classList.add('error-message')
      errorDialog.innerText = evt.detail.serverResponse
      errorDialog.setAttribute('onclick', 'this.remove()')

      // Get the nav and place the element after it
      const nav = document.querySelector('.site-nav')
      nav.insertAdjacentElement('afterend', errorDialog)
      errorDialog.scrollIntoView()
    }
  })
})

I also think we should spotlight the highlight the 204 thing in the notes of

hx-delete

specifically, because it tripped me up the first time and I see it in the discord occasionally: https://htmx.org/attributes/hx-delete/

mine:

javascript

  // If there's an error response, show it in the toast
  document.addEventListener('htmx:responseError', evt => {
    document.getElementById('toast').outerHTML =
      `<p id="toast" class="error">${evt.detail.xhr.responseText}</p>`;
  });

i have some CSS that displays

#toast.error

and keeps it fixed in place

and all my page templates include the

#toast

(hidden by default)

“We”

I didn't mean to be presumptuous! Sorry for the phrasing, just trying to say "I'd be willing to do it"

This is slick, thanks for sharing

np. i've been meaning to write about some htmx tricks and patterns that i've been picking up along the way. blog post formulating.

😀 I’m just joshing you all good. Would love docs improvements!

gotta be weird when a lot of people have contributed to (and start to feel some ownership of) a very particular vision that you've been formulating for a long time

With this sort of thing I really like “We”, eg “We should [change/add/update]…” it’s great, providing what you actually mean is “I will do a PR to [change/add/update]…”