ok great, I think alpine + htmx is what I"ll try for my test project

alpine is front end focused, there are a lot of passionate htmx+alpine users. It's a great choice. Also, I have to mention https://hyperscript.org, our sibling project for htmx. I can't recommend it over alpine, which is much more standard, but if you want something a little esoteric and fun it might be worth a look

Yeah I glanced at the documentation for it and it does look fun

But I'm trying out a few approaches to standardize a stack between a lot of coders so standard is more important

New hire -> productive asap is the goal :)

100% would recommend alpine

Yeah

Just so sick of drf + spa

So many stupid little details to manage

Can’t agree more, problem is that when you search for tutorials, it’s always API + SPA

Hey guys, what do you think about the term "Hypertext Driven Development"?

I like it. I think at one point we were joking here about Hypermedia Oriented Development Libraries, or HODL

That may be a good way to get cryptocurrency "HODLers" to try htmx 🙂

i've been working on this idea for nearly a decade: https://github.com/bigskysoftware/intercooler-js/commit/62d3dbdb5c056ee866aba3575e148de649fc3ef if you told me a year ago that htmx would be involved in 3 of 39 talks at djangocon 2021 I would have laughed at your crazy talk: I don't program in python and know next to nothing about django if you had told me four years ago that I'd rewrite intercooler-js without a jQuery dependency, I would have laughed at your crazy talk: intercooler worked fine and everyone was more interested in SPAs anyway you never know, but I'm optimistic at the very least, the whole thing is very funny

@User That's good to know, then let's hope more and more people turns back to SSR and forget that SPA hell for regular websites

we may not win, but we will have fun

I think there's a good chance that this will turn around. Anyone just a bit older will remember OOP preachers and their popularity in the past. Speaking against OOP was like cursing in the church. Now OOP is pretty much becoming a dirty word.

OK, I'm trying to incorporate the values of a few input elements as parameters to an hx-get request, and thought I'd use htmx.values() for this. But this always returns an empty JSON array for me. I'm trying this as follows:

html
<div id="modal_remove_device" class="modal">
    <div class="modal-content">
        <form id="remove_device_details">
        <h4>{% trans 'Remove device' %}</h4>
        <p>
            {% blocktrans trimmed %}
                Removing a device will cause the device to be wiped, losing all data stored on the device. By default,
                after a reset the device will be useable by everyone. If you do not want this, then select "Preserve
                factory reset protection data". below Are you sure you want to do this?
            {% endblocktrans %}
        </p>
        <div class="switch">
            <label>
                <input class="filled-in" type="checkbox" id="preserve_frp">
                <span>{% trans 'Preserve factory reset protection data' %}</span>
            </label>
        </div>
        {% if manageddevice.management_mode == manageddevice.ManagementMode.PROFILE_OWNER %}
            <div class="input-field">
                <input placeholder="Reason why work profile is wiped" id="wipeReason" type="text">
                <label for="wipeReason">Wipe reason</label>
            </div>
        {% endif %}
        </form>
    </div>
    <div class="modal-footer">
        <a class="modal-action modal-close waves-effect waves-red btn-flat">Cancel</a>
        <a id="btn_remove_device" class="modal-action modal-close waves-effect waves-green btn-flat" hx-get="{% url 'remove_device' manageddevice.id %}" hx-vals="js:htmx.values(htmx.find('#remove_device_details')
)">{% trans 'Remove device' context 'button' %}</a>
    </div>
</div>

Any clues as to what I'm doing wrong?

Could you have the button just submit the form instead, so it's sent "natively" without having to retrieve values from other places?

The form was added just as a try to see if that would work.

the backend doesn't accept a post request.

You could do

<form method="get">

which will send via GET instead of POST

Yeah, I may end up doing that, but I was also curious as to why htmx.values() doesn't seem to return anything useful.

any values in an enclosing form of an element should be included in the request

I wonder if

hx-vals

needs to start with some JSON like the example? e.g.

hx-vals="js:{data: htmx.values(htmx.find('#remove_device_details'))}"

Either way, I think having

hx-get

on the form is better overall so it captures the input values directly, and then change the tag to be a proper button that submits it:

<button form="remove_device_details" type="submit" class="...">...</button>

Hi everyone ! I'm trying to add htmx inside a project that use barbajs (https://barba.js.org/) as page transition solution. Barba JS transforms the website in a litttle SPA. I would like to know how to "reload" or "re-init" htmx after a page load (after some elements are added dynamically). So, yes, my Htmx elements are located inside the new content which is loaded by BarbaJS. If I do a full page reload, it works, of course...

👋 You will need to call

htmx.process(element);

on any new content added outside of htmx