1.0.31 @submit trigger

[McFris]

Now all commands are broken:
z-swap="/test #offleft"
or
z-swap="@click /test #offleft"

it writes:
1.0.31 ZJAX ERROR – Unable to parse z-swap: @submit trigger is only available on

elements

[codepilotsf]

Oh that's embarrassing. Please try again with new version 1.0.32

[McFris]

Ok, that fixed.
But... what happening with form data. Htmx vs Zswap?

Simple go/gin c.ParseForm() work only with Htmx. :)

[codepilotsf]

I'm not able to fully test right now but can you try new version 1.0.33 and see if that fixes it?

[McFris]

Json :) That's not bad, and it would be nice to have as option, but it's not really up to standard, IMO.

[codepilotsf]

Okay fingers crossed -- please try zjax@1.0.34

[McFris]

No luck

[codepilotsf]

Is there any other info you can give me? It's working on my end and I don't really see any clues at all in that error.

[McFris]

Error within call:
<a z-swap="POST /mrktskright?nom=123 #offleft" data-bs-toggle="offcanvas" data-bs-target="#OffCanvLeft" href="#" >Open canvas</a>

[codepilotsf]

Okay 1.0.35 fixes that bug. Note that your POST request won't contain any form data here since you're using the z-swap on an anchor tag instead of a form.

[codepilotsf]

also btw, you might find it useful to add this to the head section of of your document:

<script>
  zjax.debug = true;
</script>

[McFris]

your POST request won't contain any form data here since you're using the z-swap on an anchor tag instead of a form.

Yup, it's simple call POST with div, with form.

[McFris]

Okay 1.0.35 fixes that bug

Yeah, THAT bug fixed.

[codepilotsf]

In case anyone is interested, the issue is that submitting formData directly from JS fetch doesn't behave quite as expected. The actual FormData instance isn't stringified. The FormData object was apparently designed this way so that it can be flexible enough to also handle multipart (file uploads). But typically, a backend (I was testing with Node Express) is expecting the values to be a urlencoded string. By converting the formData to a string first, the payload arrives at the server as expected. Note that file uploads aren't yet supported but in the future, this will be supported by simply adding enctype="multipart/form-data" to the form tag as usual.

[McFris]

Another:

What is this being done for? To have the checkbox return two values in the form, either "on" or "off". Otherwise it would return only the value "on".

Next:

Text with space prefix, it's not really important, just mentioning that htmx has it looking normal:

I don't care too much about it of course, it was just the weekend and I'll be back to work with the regular htmx module tomorrow. Thanks for trying to make our job easier!

[codepilotsf]

I'm not doing anything special at all with the formData. Here's how it currently works.

First, we get instantiate the formData from the form element that triggered the z-swap:

const formData = new FormData(event.target);

Then we convert that to a string like this:

function convertFormDataToString(formData) {
  const urlEncodedData = new URLSearchParams();
  for (const [key, value] of formData.entries()) {
    urlEncodedData.append(key, value);
  }
  return urlEncodedData.toString();
}

Do you see anything in there that should cause the issues you're seeing?

[McFris]

Do you see anything in there that should cause the issues you're seeing?

I apologise, i don't understand anything about JavaScript and working inside a browser (and i don't like languages like JS in general). That's why I chose htmx for my work, and I've been using it for several years without writing a single line in JS (my main language is Go and SQL). Your library idea is even more interesting, so I tried it too.

The essence of htmx is that a normal page, for example a form, which already works with the backend through normal queries, simply becomes interactive without changing anything on the backend. Your library can't just notice a normal form request at this point.

Even worse is the case with DataStar, which I also considered, where it is necessary to completely redesign the backend, which is very difficult for me due to its size.

So I can only point out the differences in working with a normal form, but will do nothing to help in understanding how JS works. Again, I apologise for that. :)