Home » Jquery » javascript – Django: if div is not active than formset doesn't have remove button-Exceptionshub

javascript – Django: if div is not active than formset doesn't have remove button-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I am using django multiple formsets on the same page. But only one formsets should be visible at the moment. I use bootstrap nav-item for that.

<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>

The problem is that if div with formsets doesn’t have class “active” than it doesn’t show delete-fields.

If i click on the link 2 or 3 I see formsets with “Add” buttons, but without “remove”. My <td> </td> where i should have <a class="delete-row" href="javascript:void(0)"> delete row </a> function is empty.

But if i include < div class=”tab-pane fade in active”> in all div’s I have correct HTML
and all works fine:

<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>

But of course in that case all formsets are visible simultaneously.

Don’t understand why is that. Why i have dependence between bootstrap and django formsets?
How i can hide formsets with nav-item?

My javascript code:

  $(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 dynamic formsets 1.5.0, Python 3.6, jQuery 3.4.1

How to&Answer: