django-dynamic-formset 在错误的位置显示“添加”和“删除”按钮答案

【问题标题】：django-dynamic-formset shows "add" and "remove" buttons in the wrong placedjango-dynamic-formset 在错误的位置显示“添加”和“删除”按钮
【发布时间】：2019-11-11 11:03:17
【问题描述】：

我的应用昨天运行良好。在我开始在浏览器中使用 .css 属性后，突然 django-dynamic-formset 脚本不再正常工作。它为表单中的每个输入而不是每一行显示“添加”和“删除”按钮。请看附上的照片。

{% load crispy_forms_tags %}
{% load staticfiles %}
{% load static %}

<table>
{{ formset.management_form|crispy }}

    {% for form in formset.forms %}
            <tr class="{% cycle 'row1' 'row2' %} formset_row-{{ formset.prefix }}">
                {% for field in form.visible_fields %}
                <td>
                    {# Include the hidden fields in the form #}
                    {% if forloop.first %}
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                    {% endif %}
                    {{ field.errors.as_ul }}
                    {{ field|as_crispy_field }}

                </td>
                {% endfor %}
            </tr>

    {% endfor %}

</table>

<!-- <p class='btn btn-warning' id='agregar'>Agregar Posición</p> -->
<br>
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{formset.media}}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'dynamic_formsets/jquery.formset.js' %}"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
<!-- <script type="text/javascript">
  $('#agregar').on('click',function(){
    $('.formset-test').append()
  });
</script> -->

<script type="text/javascript">
    $('.formset_row-{{ formset.prefix }}').formset({
        addText: 'Agregar posición',
        deleteText: 'Borrar posición',
        prefix: '{{ formset.prefix }}',
    });
</script>`

另外，它不尊重我给出的重命名（参见代码末尾的脚本）。代替“Agregar Posicion”文本，显示默认文本“添加另一个”。

【问题讨论】：

标签： javascript html django inline-formset

【解决方案1】：

您遇到了一些不同的问题：

首先，您直接在 jQuery 对象上调用 .formset 函数。根据the docs，它需要被包装在“on-ready”函数中，例如：

<script type="text/javascript">
$(function() {
    $('.formset_row-{{ formset.prefix }}').formset({
        addText: 'Agregar posición',
        deleteText: 'Borrar posición',
        prefix: '{{ formset.prefix }}',
    });
})
</script>

这应该可以解决未使用自定义参数的问题，因为它们没有传递给 .formset 函数。

至于将标签添加到每个输入，您没有提供您的 views.py 或 forms.py 文件来了解您实际传递给模板的内容，但是根据我使用 django-dynamic-formset 的经验插件，很挑剔。我发现，如果您在表单中使用 div，则使用类名选择器效果最好，但是使用表格的文档中的示例最适合表格。如果您为您的表格分配一个“id”，然后添加一个 tbody 标记，您可以将代码更改为：

<script type="text/javascript">
$(function() {
    $('#your-table-id tbody tr').formset({
        addText: 'Agregar posición',
        deleteText: 'Borrar posición',
        prefix: '{{ formset.prefix }}',
    });
})
</script>

另外，没有看到您的 views.py 文件，但我不确定您为什么要使用

{% for form in formset.forms %}

您应该只是将表单集从您的视图传递到您的模板并将其引用为

{% for form in formset %}

【讨论】：