Failed to execute 'querySelector' on 'Element': '#.field-status' is not a valid selector.

Can

hx-select-oob

only be used to select ids? I got the above error when having

hx-select-oob=".field-status"

Aha maybe this is because

.field-status

is a child of the

hx-target

🤔 ..even though hx-swap is using

afterbegin

Heya. I fear I'm doing something wrong: I've got a server-side processing step that compiles a piece of code, and records the various stages. now, I'd like to have a UI for that using htmx, and that'll show a select box for the various stages, and display the stage's intermediate result. right now, each change in the select (choosing another stage) will re-process the code in the backend, produce the same state, and return a different view. I'd like to avoid the re-processing, but I'm afraid I don't know how. (before, I had attached the intermediate stage to the select option via some listener, and had a click on the option update the viewer.)

Hi there, I found a great example of some form validation using Bootstrap (https://gist.github.com/marcus-at-localhost/c9f0a34a2e19d666fd95f61f002ea516) but possibly running into an issue with the trigger when defining a custom extension. It kind of works since it shows which fields are invalid for a second but it is still saying the form submission is successful and refreshes the page.

html
<form sprig s-action="entries/save-entry" s-method="post" hx-ext="bs-validation" class="needs-validation" novalidation>
...
<input id="customField" name="fields[customField]" type="text" required />
</form>

js
htmx.defineExtension('bs-validation', {
  onEvent: function (name, evt, data) {

    if (name !== "htmx:afterProcessNode") {
        return;
    }

    let form = evt.detail.elt;
    // check if trigger attribute and submit event exists
    // for the form
    if(!form.hasAttribute('hx-trigger')){
      // set trigger for custom event bs-send
      form.setAttribute('hx-trigger','bs-send');
      // and attach the event only once
      form.addEventListener('submit', function (event) {
        if (form.checkValidity()) {
          // trigger custom event hx-trigger="bs-send"
          htmx.trigger(form, "bsSend");
        }

        // focus the first invalide field
        let invalidField = form.querySelector(':invalid');
        if(invalidField) {
          invalidField.focus();
        }

        event.preventDefault()
        event.stopPropagation()

        form.classList.add('was-validated')
      }, false)  
    }
  }
});

So I ended up making that todo app. I built it using Rust as a backend language. But instead of hosting it on a server, it's compiled to WASM, and run inside the user's browser in a ServiceWorker (because why not?). The initial prototype was done by richardanaya, and I built on top of it to experiment both with Rust and htmx. Check it out: https://richardanaya.github.io/wasm-service/

To be clear I found this design has a number of issues, including the fact that the browser eagerly reaps the SW so it loses its state if you leave the tab for a minute or so. But leaving such minor inconveniences aside, technically this is one way you could add offline capabilities to htmx!

Neat! I've been considering this for a while myself.

Yeah the correct solution to storing data in volatile memory is to... store it in persistent memory instead lol. Yes you could use indexeddb from ServiceWorker (not localstorage, I think SWs are restricted from using that) to make it persistent, but you'll have to add bindings to call back into JS (or switch to wasm-bindgen)

Still cool as heck

Another issue is that the SW is not restarted after its been reaped, even if you start interacting with the page again. Not sure what it's doing wrong or how to fix it

Hi

Is there an example covering

htmx:responseError

?

only this https://htmx.org/docs/#requests

and this: https://htmx.org/events/#htmx:responseError

I'm having some issues with "hx-encoding='multipart/form-data' ". Whenever i have a form with this attribute, the page reloads after the form is submitted. This is my form:

<form
    hx-encoding='multipart/form-data' 
    hx-post="{% url 'invoices_to_be_processed_upload' %}"
    hx-target="#invoice_to_be_processed_table"
>
    <input type='file' name='invoice_file' multiple>
    <button type="submit">
        {% trans "Upload" %}
    </button>
</form>

Is this normal?

no

this is the only place we use that attribute: https://github.com/bigskysoftware/htmx/blob/e2ecde0cb1de60223fdeb67101978a60c0e4a8ee/src/htmx.js#L2401

we do add an additional header to the request

and we use a FormData object, rather than a string to collect values. Can you look in the console and see if there is an exception that is maybe happening and causing the javascript handler to die?

No exception in the console

when i remove "hx-encoding='multipart/form-data'" the form is submitted, and the page does not reload

The backend is Django with the classic response:

return render(
    request,
    "partials/invoice_to_be_processed_table.html",
    context={
        "invoices": invoices,
    },
)

HTMX 1.8.4

It's very curious, everything works as expected, the hx-target gets updated correctly after the request, and about 1/2 seconds later, the page refreshes

Is there anything else going on in the page script-wise?

Oh wow i found the issue, i'm using https://github.com/adamchainz/django-browser-reload Basically what this does is it reloads your page when you make a change to your codebase. And when i upload a file with HTMX locally, the file goes to my /media folder. And django-browser-reload, detects this new file and thinks it's a change and then reloads the page.. Thanks for your help 👍

oof

If I don't have a hx-swap-oob in my response then a

<script language="javascript">

with a

htmx.on('htmx:afterSettled'..)

works as expected. But if I do include an hx-swap-oob div (in addition to the normal, non-swap-oob div) then it never gets called regardless of where I put it in the response. Is there something I'm missing?

that sounds like a bug

are you able to give me the basic content?