Django Choice Dropdown не работает на клонированной форме в Formset

Я клонирую свою пустую форму в django, следуя указаниям, которые я нашел в других местах в stack overflow. JS добавляет новую форму, как и предполагалось, однако выпадающие элементы из виджета выбора больше не работают, и я не могу понять, почему.

Я уже проверил, что все параметры присутствуют, используя функцию осмотра браузера. Похоже, что javascript не работает с объектом.

Это из шаблона:


<form method="post"> {% csrf_token %}
  <div id="form_set">
  {{ FightForms.management_form|materializecss }}
  {% for form in FightForms %}
  <div class="card white darken-1 col m12">
    <table class='no_error'>
      {{ form.non_field_errors }}
      <row>
          <div class="col m3">
              <div class="fieldWrapper">
                  {{ form.guild_member_id|materializecss }}
              </div>
          </div>

    
      </row>
      {% for hidden in form.hidden_fields %}
          {{ hidden }}
      {% endfor %}
  </table>
  </div>
  {% endfor %}
</div>

  <div class="col m12">
    <div>
        <input class="btn light-blue lighten-1" type="button" value="Add More" id="add_more">
    </div>
    <br>
    <button class="btn light-blue lighten-1" type="submit">Submit Guild Members</button>
  </div>

  <div id="empty_form" style="display:none">
    <div class="card white darken-1 col m12">
      <table class='no_error'>
        {{ FightForms.empty_form.non_field_errors }}
        <row>
            <div class="col m3">
                <div class="fieldWrapper">
                    {{ FightForms.empty_form.guild_member_id|materializecss }}
                </div>
            </div>
            
        </row>
        {% for hidden in form.hidden_fields %}
            {{ hidden|materializecss }}
        {% endfor %}
      </table>
    </div>
  </div>
</form>


<script>
  $('#add_more').click(function() {
      var form_idx = $('#id_form-TOTAL_FORMS').val();
      $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
      $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
  });
</script>

Вот мои импорты заголовков, если это проблема с версионированием или чем-то еще...

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <title>League Chronicler</title>
    <link rel="shortcut icon" type="image/png" href="{% static 'img/CScroll.png' %}"/>

    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'css/chronicler.css' %}" type="text/css" media="screen,projection"/>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


    {% block css %}
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    {% endblock css %}

    <!-- javascript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

Выпуск:

В вашем коде вы инициализируете выпадающий список выбора, который находится внутри вашей "#empty_form" в начале, поэтому он генерирует все теги, т.е.: <ul><li>.. и т.д., которые не нужны, поскольку этот div скрыт.

Восстановление проблемы с помощью фиктивного html:

$('#add_more').click(function() {
  var form_idx = $('#id_form-TOTAL_FORMS').val();
  $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
  $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});

$(document).ready(function() {
  $('select').formSelect();
});
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="col m12">
  <div>
    <input class="btn light-blue lighten-1" type="button" value="Add More" id="add_more">
  </div>
  <br>
  <button class="btn light-blue lighten-1" type="submit">Submit Guild Members</button>
</div>

<input type="text" id="id_form-TOTAL_FORMS" value="1">

<div id="form_set">

</div>


<div id="empty_form">
  <div class="card white darken-1 col m12">
    <select id="__prefix__">
      <option>----</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

Решение:

Вместо того чтобы инициализировать выпадающий список при запуске, сохраните исходный список как есть и после клонирования html инициализируйте последний добавленный список с помощью formSelect().

Рабочий код с фиктивным html:

$('#add_more').click(function() {
  var form_idx = $('#id_form-TOTAL_FORMS').val();
  $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx)); //apppend it
  $('#form_set .choice_dropdown:last').formSelect(); //then initalize the last appended dropdown
  $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


<!-- javascript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="col m12">
  <div>
    <input class="btn light-blue lighten-1" type="button" value="Add More" id="add_more">
  </div>
  <br>
  <button class="btn light-blue lighten-1" type="submit">Submit Guild Members</button>
</div>

<input type="text" id="id_form-TOTAL_FORMS" value="0">

<div id="form_set">

</div>


<div id="empty_form" style="display:none;">
  <div class="card white darken-1 col m12">
    Guild Member Name:
    <!--added class to this select you can add any class name-->
    <select class="choice_dropdown" id="__prefix__">
      <option>----</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>

Вернуться на верх