Has anyone used hx-swap-oob conditionally in django templates? E.G.

{% if condition is True %}
<div id=“true-div” hx-swap-oob=“true”/>
{% else %}
<div id=“false-div” hx-swap-oob=“true”/>

In my situation, it is returning both the true and false options in the response, rather than one or the other, but it does seem to only swap in the correct element.

I would have thought only the elements that met the conditions in the template would be included in the response, but do OOB swaps somehow override this?

^^ I’m assuming it’s most likely just nested if statements being in the wrong order / similar. Can’t imagine there’s any scenario where the template language is overruled by the markup. Will take a look tomorrow and report back

Yeah sounds like a DTL issue

If means it would only generate one set of markup, not both

Note to self: think before asking stupid questions 😆

sanity checks are always nice 🙂

Good ‘ol rubber ducking

🦆

Hello guys, i am trying htmx in django for the first time and i am having an error after all htmx elements in this project. When a i click any button with hx classes, it redirects for a page in blank that says 2022. I tried to debug, changed views and templates, but same error.

after any button with htmx it redirects for a page with just "2022". I think htmx is really a hand on the wheel and i trying not to give up and use JS /ajax

thanks

If you inspect the network requests after pressing the button, you can look at: 1. What endpoint the request is going to 2. Whether there are any hx- request headers, which would indicate whether it is an htmx request or not 3. The response (i.e what is being returned by the server) That way, you can find exactly which endpoint is sending the wrong data OR if the htmx isn’t quite correct for what you’re trying to achieve

Feel free to send further screenshots of those areas @helpful-teacher-63323 & I’ll take another look 😊

Why is you form a post and your button a get?

Hi Thai. I just added a get button to make a simple test to see if the same mistaken happens as the post method. In my case, all the results are the same with get, post and other endpoints. I initiated another app from zero, I am copying / pasting and testing. It is working. The problem is something in the backend that I did or changed but I don't know exactly .

Thanks for the help guys

I am having a lot of work, but in the end I will save a lot of time not writing javascript for everything.

I normally don't put anything in the form tag and it all goes on the button. So for an update form The save button will perform a hx-post {% url 'app:update' pk %} and the cancel button will perform an hx-get {% url 'app:list' %}. Also be aware of your get_success_url and where it points to.

When i give target to that container it splits into two including that navbar which is completely in another div. But when i give target to the body tag. Everything works fine.. can anyone help me.. or am i not understanding the hx-swap well?

Could you send the code that’s causing this swap please?

You mean the whole html file?

Or just the snippet(s) of code that you are using to cause the swap in the vid 😊

Hello, I have a simple project to discover htmx. At first, I created a simple form directly in html. Now I use a DjangoForm but with htmx the page does not refresh and the form field does not empty after send it. I thought that using a DjangoForm would solve the problem but no. What is the solution to empty the form field after sending it?

either target the entire form and render a cleared input or use some client side scripting to clear it manually

I don't want use scripting in client side. How i target the entire form and render a cleared input ? I use htmx like this for this part :

html
                <form method="POST" class="d-flex gap-2 mt-2">
                    {% csrf_token %}
                    {{ form_task.description }}
                    <button class="btn btn-success"
                            hx-post="{% url 'add-task' %}"
                            hx-target="#tasks"
                            hx-vals='js:{collection: getCollectionFromURL()}'
                            hx-swap="beforeend"
                            type="submit">Add
                    </button>
                </form>

I thought django did it directly in its backend but no.

set hx-target to be a parent of the form and the items being added, enclose it in a div w/ an id if necessary

I don't understand how to do what you are telling me.