如何将 Django 内联表单集与 Bootstrap-select 插件一起使用？

Question

我一直在尝试将 Django 内联表单集与 bootstrap-select 插件一起使用 https://developer.snapappointments.com/bootstrap-select/，其他一切都完美无缺，我能够成功在我的表单中的另外两个 select 上调用插件，我正在使用内联表单集在我的书中添加新作者。当我输入 "selectpicker" class 时，它只工作一次，当页面加载时，但是当我按下按钮添加更多作者时，select 字段没有加载。

所以我有一个问题...我可以同时使用这两者吗？如果是，如何？如果没有，是否有任何解决方法可以在 selection 字段中进行搜索？

波纹管是当我按下表单末尾的大绿色 "Add" 按钮时我的表单的外观图像。

可以看到只有两个字段，比第一个少了一个

如果需要任何代码，请告诉我，我会立即添加。

谢谢！

编辑：

这是克里斯问我的代码：

我的模板：

{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}
  {% load static %}
  <form method="POST" class="form" action="">
    {% csrf_token %}

    [other fields]
    ...

    <!-- HERE I HAVE MY TWO OTHER SELECT FIELDS WHICH WORK PERFECTLY -->

    <div class="container">
      <div class="col-sm-12">
        <div class="form-group">
          <div class="row">
            <div class="col-sm-6">
              <label>Editora do Livro:</label>
              {{ form.editora_cod_editora|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
            </div>
            <div class="col-sm-6">
              <label>Categoria do Livro:</label>
              {{form.categoria_cod_categoria|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- HERE START MY ONLINE FORM, AS SHOWS THE PRINT -->

    <div class="container">
      <div class="col-sm-12">
        <hr>
        <h4>Adicionar Autor</h4>
        <hr>
        <div class="form-group bg-light rounded ">
        {{ autor_livro.management_form }}
          {% for form in autor_livro.forms %}
            <div class="{% cycle 'row1' 'row2' %} formset_row m-5 inline-form">
              {{ form.autor_cod_autor|add_class:"selectpicker form-control"|attr:"data-live-search='true'" }}
              {{ form.ordinal_autorlivro|add_class:"form-control" }}
              {{ form.autor_funcao|add_class:"form-control" }}
            </div>
          {% endfor %}
          </div>
      </div>
      <div class="container">
        <div class="col-sm-12">
          <div class="form-group">
            <div class="row">
              <div class="col-sm-8"></div>
              <div class="col-sm-4">
                <button type="submit" class="btn-outline-primary btn float-right">Salvar</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
    {% block scripts %}
      <!-- HERE I HAVE MY SCRIPT THAT MAKES THE INLINE FORM WORK WITH THAT PLUGIN -->
      <script src="{% static 'js/jquery.formset.js' %}"></script>
      <script type="text/javascript">
        $('.formset_row').formset({
          addText: 'Adicionar Autor',
          deleteText: 'Remover',
          prefix: 'autorlivro_set'
        });
      </script>
    {% endblock %}
  {% endblock %}

Answer 1

答案是 bootstrap-select 插件的行为。您正在使用 class "selectpicker" 激活它。加载页面后，一些 javascript 魔术使用 class selectpicker 获取元素并创建您看到的小部件。您现在看到的 "select" 不是您原来的 <select>，而是一个辅助小部件，您的 <select> 仍然存在，但从您的视图中隐藏了。

现在，当您添加另一个表单时，不会再次调用 javascript 魔法，因此您会得到一个新表单，其中您的 <select> 隐藏在用户视线之外的某个地方。

为了让它再次呈现得很好，您需要在添加新表单后运行所需的 javascript。 django-dynamic-formset 提供了一个名为 added 的选项，允许您定义一个在添加新表单后调用的函数。表单的更多详细信息请参阅表单集选项 here.

所以定义函数，添加窗体后调用。在您的情况下，您的脚本可能如下所示：

<script type="text/javascript">
    var activate_select = function(row){
        row.find('.selectpicker').selectpicker();
    };

    $('.formset_row').formset({
        addText: 'Adicionar Autor',
        deleteText: 'Remover',
        prefix: 'autorlivro_set,
        added: activate_select
    });
</script>

如何将 Django 内联表单集与 Bootstrap-select 插件一起使用？

How can I use Django inline formset with Bootstrap-select plugin?

django

django-templates

bootstrap-select

inline-formset