question: I have a table with products, each table row has an edit button:

<tbody id="table">
    {% for product in page.object_list %}
        <tr hx-target="this">
            <td>
                {{ product.number }}
            </td> 
            {% for key, value in product.data.items %}
                <td>{{ value }}</td>
            {% endfor %}
        
            <td>
                <button class="btn btn-primary btn-sm"
                        hx-get="{% url 'detail' product.pk %}"
                        hx-swap="outerHTML">
                    edit
                </button>   
            </td>
        </tr>
    {% endfor %}
</tbody>

clicking the button switches to inline editing with a form (works) - but I am not sure on how to revert back. This is the HTML that gets swapped in:

<tr id="productrow">
{% for field in form %}
    <td>
        {{ field.errors }}
        {{ field }}
    </td>
{% endfor %}

<td>
    <button
      type="submit"
      class="btn btn-success"
      hx-post="{% url 'update' 4 %}"
      hx-target="#productrow"
      hx-swap="outerHTML">
      OK
    </button>

    <button
      class="btn btn-danger"
      hx-target="#productrow"
      hx-swap="outerHTML">
      CANCEL
    </button>
  </td>
</tr>

How would the OK and the CANCEL Button be ablee to switch back to the new/original content?

typically you would issue a GET w/

hx-get

on the cancel that would re-render the display row, somewhat like this example: https://htmx.org/examples/click-to-edit/

btw, you can make things highlight properly by using three backtics and then `html`: \```html \```

I tried to follow a tip from @mysterious-toddler-20573 but I fail to get it working, anyone an idea:

html
<button class="btn btn-danger"
        hx-target="#productrow"
        hx-post="{% url 'update' pk %}"
        hx-swap="click[testing]"
        hx-swap="outerHTML">
            CANCEL
</button>

{% block js %}
    <script>
        document.body.addEventListener('htmx:configRequest', (event) => {
            event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
        });
    </script>
    <script>
        var testing = function() {
            console.log("hello");
            return true
        }
    </script>
{% endblock js %}

But this never prints something - why is the function never called?

Please, somebody help me understand this:

html
    <form enctype="multipart/form-data">
        {% csrf_token %}
        {% for field in form %}
            {{ field }}
        {% endfor %}
            <button type="submit"
                    class="btn btn-success"
                    hx-post="{% url 'update' pk %}"
                    hx-target="#productrow"
                    hx-swap="outerHTML">
                submit
            </button>
    </form>

this correctly sends a request to my django endpoint on

update

. My problem is, that I have file fields in this form, so I needed to add a

method="post"

and if I do so, the request gets sent to the current view (being called

HTMXProducts

). My `urls.py`:

python
urlpatterns = [
    path("products/", views.HTMXProducts.as_view(),  name = 'products'),         # <--- hx-post is ignored and post is sent here when method="post" is added to form
    path('detail/<int:pk>', views.ProductDetailView.as_view(), name = 'detail'), 
    path('update/<int:pk>', views.ProductUpdateView.as_view(), name = 'update'), # <--- ends up (correctly) here without method="post"
]

what am I missing here?

Why do you need method=post

I think having hx-post should be fine

Htmx will post the content of the enclosing form in the body

because in my request (Firefox console) I only see

fieldvalue:"[object File]"

I thought this is because the method for filefield needs to be

post

and now that you mention it,

hx-post

probably takes care of this already.

Try hard coding the url and seeing if something is wrong with your url pattern

Still I do not understand why it only says [object File]

(fieldvalue being the name of any field I use)

all the request etc works great, just the filefield does not

looks like this

bc in the django

clean

method of the form I want to work with this file, but it looks like the enctype is wrong:

<form enctype="multipart/form-data">

Ah, htmx doesn't know about the encoding type. If you moved the hx-post to the form it would work.

if you want to keep the htmx attributes on the button, you can use this: https://htmx.org/attributes/hx-encoding/

hm, have problem with this example: https://www.bugbytes.io/posts/django-and-htmx/ I've pretty all the same expect didnt use django-widget-tweaks in form-field I see in Dev Tools that I got good response, see in elements that something is changing in my hx-target (see hx-settling), but content doesnt appear inside div 😕 even used django-widget-tweaks, same thing

Let's say I have

base.html

that has all of my scripts, css, etc as well as my nav. And then I have

home.html

which extends base, as well as a couple of other nav options, i.e.

search.html

that also extend base. Is there a good way to prevent the page from reloading when I navigate from home to another one of the nav options? I could hx-swap body, but the problem if someone goes to

/app/

(home) or

/app/search

(search) in their browser, I need

base.html

which both extends to load at least once

OMG. you just unmade a big knot in my head with that comment-

thank you

Hi, I'm having a serious problem with hx-push url, it's working but in opposite direction instead of it to change the entire URL and swap the one I specified, it would just go ahead and append the specified one to it.

See the display here

I don't know if there is any other method of pushing an entirely new url instead of appending some text to an existing url.

put a / at the start of the url?

When I have a button:

html
 <button hx-get="{% url 'detail' product.pk %}"
         hx-trigger="click[testing]"
         hx-swap="outerHTML">
            test
</button>

and a JS function

JS
var testing = function () {console.log("test was clkd")}

How can I apply the function being executed on the click Event of the button?

(everytime the button is clicked)

and a question: Is the first swap applied first, the second swap applied later (Eg could I put two swaps with two functions there?)