Django: если div не активен, то у formset нет кнопки удаления - PullRequest
Новая
       7

Django: если div не активен, то у formset нет кнопки удаления

0 голосов
/ 16 февраля 2020

Я использую django несколько наборов форм на одной странице. Но только один набор форм должен быть виден в данный момент. Для этого я использую bootstrap nav-item. 

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#1"> 1 </a></li>
    <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#2"> 2 </a></li>
    <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#3"> 3 </a></li>
</ul>

<div class="tab-content">
    <div id="1" class="tab-pane fade in active show">
        {% include "1.html"  %}
    </div>
    <div id="2" class="tab-pane fade">
        {% include "2.html"  %}
    </div>
    <div id="3" class="tab-pane fade">
        {% include "3.html"  %}
    </div>
</div>

Проблема в том, что если div с наборами форм не имеет класса " active ", то он не отображает поля удаления.

Если я нажимаю на ссылку 2 или 3, я вижу наборы форм с кнопками «Добавить», но без «удалить». Моя <td> </td>, где у меня должна быть функция <a class="delete-row" href="javascript:void(0)"> delete row </a>, пуста.

Но если я включу

во все div, у меня будет правильный HTML, и все работает хорошо: 
<div class="tab-content">
        <div id="1" class="tab-pane fade in active show">
            {% include "1.html"  %}
        </div>
        <div id="2" class="tab-pane fade in active">
            {% include "2.html"  %}
        </div>
        <div id="3" class="tab-pane fade in active">
            {% include "3.html"  %}
        </div>
    </div>

Но, конечно, в этом случае все формы будут видны одновременно.

Не понимаю, почему это так. Почему у меня зависимость между bootstrap и django formsets? Как я могу скрыть формы с помощью nav-item?

Мой javascript код: 

  $(function() {

        $('#form_set_1 tbody tr').formset({
            addText: '+',
            deleteText: 'delete row',
            formCssClass: 'dynamic-formset1',
            prefix: '{{ form1.prefix }}',

        });

        $('#form_set_2  tbody tr').formset({
            addText: '+',
            deleteText: 'delete row',
            formCssClass: 'dynamic-formset2',
            prefix: '{{ form2.prefix }}' 
        });

         $('#form_set_3 tbody tr').formset({
            addText: '+',
            deleteText: 'delete row',
            formCssClass: 'dynamic-formset3',
            prefix: '{{ form3.prefix }}' 
        });  
    });

Django 1.11.27, Django Dynami c Formsets 1.5.0, Python 3.6, jQuery 3.4. 1

...