Sorry, I’m on my phone so I can’t test that, but you get the gist of it.

I really need to learn hyperscript huh? Alpine is a bit funky. Useful but I need to get used to it.

Using: Bootstrap, django, htmx, djang-filter forms I feel like I'm missing something here. I'm trying to put a Bootstrap accordion menu within a form. Issue is, htmx is sending a get request whenever a card is expanded or collapsed. I don't want it to send any request to the server until the user hits submit. I've tried hx-disable="true" and hx-disinherit="*". I've tried moving the htmx to the input tag. I've tried using the target:#input id trigger modifier, but this stop htmx completely. Is there a way to do this, or is the way I've implemented htmx / Bootstrap on this form completely backwards? I have a feeling it's due to whatever Javascript Bootstrap is using. But any dirty workaround is fine.

html
<form class="col-3 col-md text-dark" hx-get="{% url 'vendors' %}" hx-target="body">

    <label for="id_name" class="text-white">Search</label>
    <p class="text-black">{{ filter_form.form.name }}</p>

    <div id="accordion" class="text-dark">
        <div class="card">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <!-- I don't want this performing any HTMX -->
                Store Location
              </button>
            </h5>
          </div>
      
          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
                {{ filter_form.form.store_location }}
            </div>
          </div>
        </div>
...
    <input type="submit" id="testsubmit"/>

</form>

Nevermind... Nothing to do with HTMX, that's just the way buttons work in forms. Adding type="button" to the button prevents it from acting as a 'submit' event

I am raising an exception from a view like this

raise BadRequest("Custom message")

. I am able to "catch" the error in htmx by listening to

htmx:responseError

how can I access that exact exception message so I can display it?

You'd probably have to write your own custom exception handler to pass the message along. IIRC Django doesn't return the error message to users by default in case it contains something sensitive. What I've done before is simply return the appropriate response class instead like

return HttpResponseBadRequest("Invalid state")

That makes sense. The slight issue I'm having with using returning

HttpResponseBadRequest

or

HttpResponse(status_code=400)

is that HTMX is likely to process both responses as

status: 200  statusText: "OK"

even though

response: "<HttpResponseBadRequest status_code=400, \"text/html; charset=utf-8\">"

when you listen to

'htmx:afterRequest'

event. Raising

BadRequest

on the other hand gives the appropriate status code,

400

when you listen to

'htmx:responseError'

event, as it should be, but then the custom message is not sent along, even when you specify one when you raised it.

Perhaps I'm over thinking the issue.

htmx shouldn't be seeing it as a

200

if the HTTP status code isn't. At least I'm pretty sure it doesn't when I've done similar before, though that was a while ago and on work project's I can't look at right now and I've not bothered to do much error handling in my personal ones (yet)

I've also used

HX-Trigger

in certain error scenarios to trigger some JS that renders a toast notification with an error if need be. Bonus is it can also be used to show on success, close modals, etc.

I'll take a look at

HX-Triggers

. As in the case you described above, I'm using this for error messages.

Trigger a custom event and handle it client side with an alert / toast / whatever workflow is what we do here

Inspired by https://blog.benoitblanchon.fr/django-htmx-messages-framework/ , hooked on the Django message framework but scripted with #796428329531605032

For this specific case, sure, it’s not necessary to go round-trip to the server. But when your use case (eventually) leads to doing something in a database with the string, this pattern offers advantages.

I'm so running with this. 🙂

Did anyone find a way to implement Slippers with PyCharm? The inspector keeps seeing slipper's symbol-containing tags as improper template tags, and I found no way around it.

I've been thinking about moving from Alpine.JS to _hyperscript . Anyone else made this choice? What's your thoughts?

I can't offer an unbiased take, but my impression is that alpine.js is better if: - you are really comfortable w/ modern reactive javascript libraries - your application needs reactivity in order to keep the front end simple whereas hyperscript is better if: - you aren't as wedded to javascript and like learning new languages - your scripting needs are relatively simple (e.g. toggling classes, etc.)

I want to use an event-driven approach to "update other things". Currently, after a POST to add an item to a db, I use hyperscript to trigger a load event on the element I want to update. I want to see what it's like using HTMX only

How do I create a custom event in the Django view? I use django-htmx if that helps.

Found a bugbytes YouTube video that pointed me in the right direction.

python
from django_htmx.http import trigger_client_event

In view:

python
response = TemplateResponse(...)

return trigger_client_event(response, 'customeEvent', {})

Nice find. Keep in mind that trigger_client_event can also take an "after" argument which you can set to either "request" (which is the default), "swap" or "settle".

And if you want to add multiple client events, you can do something like this:

python
        # Initialize response
        response = HttpResponse(status=200)
        # Trigger client event to update table
        trigger_client_event(response, "requisitionChanged", params={}, after='swap')
        # Trigger client event to close modal
        trigger_client_event(response, "closeModal", params={}, after='settle')
        # Return response
        return response

Which is pretty handy cause you can add different events to trigger at different moments during the htmx request. You can get a better grip on the order of operations here: https://htmx.org/docs/#request-operations

Nice, thanks for the info. I'll be reading the docs and the book religiously.

I just wanna say, I began switching from Alpine.JS to _Hyperscript... and it ROCKS. It's so intuitive. Very easy to adapt to. And so fun to use.

I was having headaches from trying to accomplish the simple task of closing my modal dialog upon submitting my form using Alpine.JS... Now I'm not bashing Alpine, I might just be a bit of a monke. But it was a breeze to find a solution using _Hyperscript, just by looking through the docs for a couple minutes.

I love hyperscript.

But, I sometimes feel like it's behavior is unpredictable.

Example:

on click remove my innerHTML

doesn't work.

on click set my innerHTML to ''

works, though.