Как я могу использовать Django встроенную форму с плагином Bootstrap -select? - PullRequest
Новая
       102

Как я могу использовать Django встроенную форму с плагином Bootstrap -select?

0 голосов
/ 30 января 2020

Я пытался использовать встроенный набор форм Django с плагином bootstrap -select отсюда https://developer.snapappointments.com/bootstrap-select/ и все остальное работает отлично, я могу успешно вызвать плагин для двух других вариантов, которые у меня есть в моей форме, и я использую встроенный набор форм для добавления новых авторов в мою книгу. Когда я помещаю класс «selectpicker», он работает только один раз, когда страница загружена, но когда я нажимаю кнопку, чтобы добавить больше авторов, поле выбора не загружается.

Так что у меня есть вопрос. .. я могу использовать два вместе? Если да, то как? Если нет, есть ли обходной путь для возможности поиска в поле выбора?

Ниже показано, как выглядит моя форма, когда я нажимаю большую зеленую кнопку «Добавить» в конце формы. my form, showing the problem with the author inline formset

Вы можете видеть, что есть только два поля, одно меньше первого.

Если какой-либо код необходим, пожалуйста, дайте мне знать, и я добавлю сразу.

Спасибо!

РЕДАКТИРОВАТЬ:

Вот мои коды, как спросил Крис:

Мой шаблон: 

{% 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 %}

1 Ответ

1 голос
/ 31 января 2020

Ответ - поведение плагина bootstrap-select. Вы активируете его с помощью класса «selectpicker». После загрузки страницы некоторые javascript magi c берет элементы с классом selectpicker и создает виджет, который вы видите. "Select", который вы сейчас видите, - это не ваш <select>, а вспомогательный виджет, ваш <select> все еще там, но скрыт от вашего взгляда.

Теперь, когда вы добавляете другую форму javascript magi c больше не вызывается, так что вы получаете новую форму, где ваш <select> спрятан где-то от глаз пользователя.

Для того, чтобы его снова правильно визуализировать, вам нужно запустить требуемый javascript после того, как вы добавили новую форму. django-dynamic-formset предоставляет параметр с именем added, позволяющий определить функцию, которая вызывается после добавления новой формы. Подробности формы см. В опциях набора форм здесь .

Итак, определите функцию и вызовите ее после добавления формы. В вашем случае ваш скрипт может выглядеть так: 

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