django inline formset inside a modal - delete field

Question

I am creating an edit view inside a modal. My view consists of a regular django form and inline formset. I have used django-dynamic-formsets for adding and deleting new formsets and this is where I have a problem. When formset is displayed inside a modal, the "remove" field is blank and I cannot delete a formset. blank For a quick example I'm using Daniel Chen's "Django Inline formsets example: mybook".

my html:

<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">

<div class="modal-content">
    <span class="close">&times;</span>
    <div class="col-md-4">
        <form action="" method="post">{% csrf_token %}
            {{ form.as_p }}
            <table class="table">
                {{ familymembers.management_form }}

                <thead>
                    <th>One</th>
                    <th>Two</th>
                    <th>Three</th>
                    <th></th>
                    <th><i class="glyphicon glyphicon-remove"></i></th>
                </thead>
                <tbody>
                    {% for form in familymembers.forms %}
                    <tr class="{% cycle row1 row2 %} formset_row">
                        {% for field in form.visible_fields %}
                        <td>
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            <input type="submit" value="Save"/> <a href="{% url 'profile-list' %}">back to the list</a>
        </form>
    </div>
</div>
</div>

my js:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'formset/jquery.formset.js' %}"></script>
<script>
    $('.formset_row').formset({
        addText: 'add formset',
        prefix: 'familymember_set'
    });
    var modal = document.getElementById('myModal');
    var btn = document.getElementById("myBtn");
    var span = document.getElementsByClassName("close")[0];

    // When the user clicks on the button, open the modal 
    btn.onclick = function() {
        modal.style.display = "block";
    }
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
    }

    $('.myModal').click(function() { 
        $('body').css('overflow', 'hidden');
    });
</script>

Jorge Dominguez Jorge Dominguez · Accepted Answer · 2017-11-17T19:20:22

I have the same issue, and what works for me was modified a little bit the jquery.formset.js javascript file, on the line 139, just pass the call to insertDeleteLink(row) outside of the if sentence, like this

 insertDeleteLink(row);
 if (row.is(':visible')) {
    applyExtraClasses(row, i);
 }

django inline formset inside a modal - delete field

1 Answers