So recently have been learning about formsets. I realized at a certain point formsets begin to slow the website down due to the large amount of forms that are attached to these formsets. Some background is that I am following the typical for loop of a formset and then doing {{ form }} but I also include a {% include html %} for a display. What I’ve been trying to do then is to convert the normal for loop to just create a button that when pressed with ajax load the include html based on the form that the button is attached to. This is where I am stuck where I am having a hard time figuring out how to accomplish this.
Any guidance would be greatly appreciated. If more information is needed, I’d be happy to answer. Thank you!
We’ve done something like this in the past.
The “add” button calls a view that renders an instance of the form, with the IDs needing to be assigned being passed in as url parameters.
If we had to do this now, we would do the client side using HTMX instead of managing the AJAX ourselves.
Oh okay, I did read about htmx recently. I assume you’re referring to hx-post, where it then swaps the button for the some html?
For future reference, could you expand a little on showing the correct form using ajax? The code I have is similar to
{% for form in formset %} {{ form }} {% include path/to/html extra_params=form_extra_params %} {% end %}
This is all in the main.html I have for display and what I’m trying to do is basically replace the include template with a div and a button that when pressed performs an ajax get call to get the specific form information that the button is associated to and finally adds the include template into the html of the div added as well.
Hopefully my thoughts are written out. Thank you again for the guidance!
Not quite. In this case it’s an hx-get, and it adds the html being returned to the div containing the formset. (The button stays to allow you to add another form.)
The specifics for the AJAX would depend upon what (if any) JavaScript framework you’re using. The answer’s going to change depending upon whether you’re using raw JavaScript, jQuery, or some other JavaScript library. (In that sense, HTMX is just another library.)
So in my case I’m using jquery and I’m trying to simulate the idea of the accordion tabs where when you first get onto the page all you see are the quickly loaded tabs (or buttons, for simplicity). And then when you click on that button then right below it, the form that it is associated to with ajax into the page. Click the button again and then the form, that is already loaded, will just get closed or just a simple display: none style.
It also seems that maybe hx-get might not be what I’m looking for since I would only be needing it to retrieve the form once and not create a new form since already have a button for new forms.
Thanks again
If you’re going to have multiple instances of the same form on the page, you need to create the new instance of the form each time. You must not have multiple elements on the page with the same id attribute, and if you’re using formsets, you must not have multiple elements on the page with the same name attribute either. And, the name attributes of the form must match the requirements of the formset. (You also need to update the management form as well.)
Understood, I will attempt this again and if any other issues arise I’ll post here. Thank you so much for all the help!