There is probably better ways, but I am new to python/django/html

This is probably a simple question and I am missing something obvious. If I load in some new HTML with a hx-get, any javascript that is on the page stops working. I am just using AlpineJS for drop down menus, like this https://larainfo.com/blogs/create-dropdowns-alpine-js-with-tailwind-css The AlpineJS script is loaded in by base.html, so I am not loading any new JS. I have spent hours trying to work this out, but I am not sure where I am going wrong. JS is completely foreign to me.

My solution was to change the status_code from 302 to 303.

I have a repeating

input

form element that I would like to include more info in the htmx request but I'm not sure how to do it. currently:

<input hx-target="#abc_this" hx-swap="outerHTML swap:0s" 
         class="form-control form-control-sm" type="number" 
         name="nameabc" value="0.00" step="0.5" 
         hx-post="/projects/update" hx-trigger="change delay:0.1s">

I'd like to add more attributes to the htmx request than are here: https://www.w3schools.com/html/html_form_attributes.asp Does anyone know how to do this?

📝 edit: I ended up finding a better solutions with

hx-vals

here --> https://htmx.org/attributes/hx-vals/ ==================== fun when just asking makes you rethink your google search and you come up with magic https://htmx.org/attributes/hx-include/ example

<div>
    <button hx-post="/register" hx-include="[name='email']">
        Register!
    </button>
    Enter email: <input name="email" type="email"/>
</div>

If you replaced the

div

with a

form

would it not work without the

hx-include

?

I can’t do that because of limitations around putting forms in tables.

Ah. Fair enough. Carry on 😀

Im using DataTables, hx-get on the tbody of the table works fine, however when you search the table it clears, I know htmx.process needs to be used but not sure where to put it, anyone used DataTables with HTMX?

Adams talk is looking sweet.

Will want to tune into that for sure

very cool talk @high-toothbrush-44006 !

I'm afraid this talk will be in person only!

Perhaps I could do it online at a later date

so jelly of the audience, good luck!

I added the pdf of the slides in the repo ^

Did you end up solving this?

I feel like this is the perfect level to pitch the beauty of htmx to my team 🙂

if you're reading this later, the correct HTMX attribute to use is

hx-vals

. At least I was able to get this attribute to work without any issues where

hx-include

had some issues with CSS selectors (or something like that).

Hey everyone, I'm doing a PoC on how to do partial/inline form validation with django, trying to keep it as simple as possible. Here is the result so far: I'm using

hx-select

&

hx-trigger=blur

to only replace current input element with the validation that is sent from the server. How the view looks like:

python
class SignUpView(FormView):
    form_class: forms.Form = SignupForm
    template_name: str = 'form-demo.html'
    success_url = reverse_lazy('form-demo')

    def form_valid(self, form):
        if self.request.htmx:
            return self.render_to_response(self.get_context_data(form=form))
        return super().form_valid(form)

How the template looks like:

html
    <form method="post">
      {% csrf_token %}

      <div
          id="name_field" {% if form.name.errors %}class="error"{% endif %}
          hx-select="#name_field"
          hx-post="{% url 'form-demo' %}"
          hx-trigger="blur from:find input"
          hx-target="#name_field">
        {{form.name.label_tag}}
        {{form.name}}
        {{ form.name.errors }}
      </div>

      <div
          id="email_field"
          {% if form.email.errors %}class="error"{% endif %}
          hx-select="#email_field"
          hx-post="{% url 'form-demo' %}"
          hx-trigger="blur from:find input"
          hx-target="#email_field">
        {{form.email.label_tag}}
        {{form.email}}
        {{ form.email.errors }}
      </div>

      <div id="repeat_email_field"
          {% if form.repeat_email.errors %}class="error"{% endif %}
          hx-select="#repeat_email_field"
          hx-post="{% url 'form-demo' %}"
          hx-trigger="blur from:find input"
          hx-target="#repeat_email_field">
        {{form.repeat_email.label_tag}}
        {{form.repeat_email}}
        {{ form.repeat_email.errors }}
      </div>

      <input type="submit" value="Submit">
    </form>

Any feedback is welcome, maybe I would like to DRY the template part a little bit more....

I would love to get a definitive way to do this and add to the django-htmx docs

that is much easier than I expected

I'm basically wrapping each form field with a

div

+ some

hx-

directives. The backend is still pretty agnostic and I'm just accounting for the case where the form is valid to render the template instead of redirecting or making any change in the database. The submit action is still expected from the user and follows the normal

FormView

flow...

I think the only suggestion I have is something to more obviously mark that this is validate only

if self.request.htmx

could apply for submitting the form through htmx or a boosted thing

so I might apply an hx-val of "validate=true" or something

you might be able to reuse the field for the hx-select as well

something like

hx-select={{form.field.id}}