模式内的django内联表单集 - 删除字段答案

【问题标题】：django inline formset inside a modal - delete field模式内的django内联表单集 - 删除字段
【发布时间】：2018-03-08 15:49:42
【问题描述】：

我正在模态框内创建一个编辑视图。我的观点包括一个常规的 django 表单和内联表单集。我使用 django-dynamic-formsets 来添加和删除新的表单集，这就是我遇到问题的地方。当表单集显示在模式中时，“删除”字段为空白，我无法删除表单集。举个简单的例子，我使用 Daniel Chen 的“Django Inline formsets example: mybook”。

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

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

【问题讨论】：

标签： javascript jquery django

【解决方案1】：

我有同样的问题，对我有用的是 jquery.formset.js javascript 文件，在第 139 行，只需在 if 语句之外传递对 insertDeleteLink(row) 的调用，就像这样

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

【讨论】：