"Django-Formset Add/Remove Buttons Not Working Inside Bootstrap Accordion"

[DallyMorgan]

I actually have several forms, and each form contains dozens of fields. I don’t want to display them all together, so I opted for accordions. The only issue is that when I display the forms like this, everything works perfectly — including the add and remove buttons for one-to-many relationships. But when I try to display them inside accordions, they appear but don’t work.

`

{% for holder in form_collection %}
  {% if holder.is_single %}
    <django-form-collection>
  {% elif holder.is_first %}
    {% if holder.is_template %}
      <template class="empty-collection" prefix="{{ form_collection.prefix|default_if_none:0 }}">
    {% endif %}
    <django-form-collection sibling-position="{{ holder.position }}"
                            min-siblings="{{ form_collection.min_siblings }}"
                            {% if form_collection.max_siblings %}max-siblings="{{ form_collection.max_siblings }}"{% endif %}
                            {% if holder.fresh_and_empty %}fresh-and-empty{% endif %}>
  {% endif %}

  <div class="accordion-item">
    <h2 class="accordion-header" id="heading-{{ forloop.counter }}">
      <button class="accordion-button {% if not holder.is_first %}collapsed{% endif %}" 
              type="button" data-bs-toggle="collapse" 
              data-bs-target="#collapse-{{ forloop.counter }}"
              aria-expanded="{% if holder.is_first %}true{% else %}false{% endif %}" 
              aria-controls="collapse-{{ forloop.counter }}">
        {{ holder.legend|default:"Élément #" }}
      </button>
    </h2>
    <div id="collapse-{{ forloop.counter }}" 
         class="accordion-collapse collapse {% if holder.is_first %}show{% endif %}" 
         aria-labelledby="heading-{{ forloop.counter }}"
         data-bs-parent="#accordion-{{ form_collection.prefix|default:'form_collection' }}">
      <div class="accordion-body">
        {{ holder }}

        {% if holder.is_last %}
          <div class="collection-remove-button">
            {% include remove_collection_button %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>

  {% if holder.is_single %}
    </django-form-collection>
  {% elif holder.is_last %}
    </django-form-collection>
    {% if holder.is_template %}
      </template>
      <div class="collection-add-button">
        {% include add_collection_button %}
      </div>
    {% endif %}
  {% endif %}
{% endfor %}

Enregistrer `

[jrief]

If collapsed accordion items use display: none;, JavaScript can't determine their value.

If you want me to check on this problem, please create an example inside the provided folders and point me onto your fork.

[DallyMorgan]

Here is the link to the repository: https://github.com/DallyMorgan/Suivi-Eva.git

[jrief]

Please don't share your repository with me. Add a the minimum required to reproduce it using one of the many examples.
For details read this: https://django-formset.fly.dev/contributing/#reporting-bugs

Btw. In version 2.1, I will add collapsible collections.

[KianAnbarestani]

This issue likely happens because the JS responsible for handling add/remove actions isn't re-binding to DOM elements inside collapsed accordion sections. Ensure that any dynamic logic (e.g., event listeners or mutation observers) is triggered after the accordion panel becomes visible. You can listen to the shown.bs.collapse event and re-bind handlers or re-initialize logic for the form fields inside the opened accordion section. Also, verify that template elements aren't being skipped by your JS init logic.

[DallyMorgan]

That was indeed the problem and I was able to fix it.
Sorry for the delay, I was really overloaded with projects.

[TTorture]

in order to make a formset more accessible, I want to organize it in Bootstrap5's nav-items. also, I am using floating labels. in general, is it possible to use custom forms rendering fields with {{ form.field }} or is passing css classes in the Collection class and usage of {{ form-collection }} advised and the way to go?

[jrief]

One of the goals of this library, is to separate the form rendering from the form logic (Crispy forms for instance keeps them inside the form logic, which in my opinion is not a good idea). I therefore created a FormRenderer for each CSS framework and strongly suggest to use them to the rendering to your purpose. In each reanderer you can specify CSS classes for each field, group, row and form.

[TTorture]

I looked into FormRenderer but struggle with using it for my purpuses.
I have these models, which I want to render in a form. I want to split it up, so it is easier to use for the user and responsive (for mobile):
Parent
ParentPictures
M2M-ThroughModel (fk to Parent and Child)
Child
ChildPictures

my idea is to have two Nav pills called "parent" and "child". Within "child" I want individual nav tabs for each created child. Is something like this possible with FormRenderer?