Django 选择下拉菜单不适用于表单集中的克隆表单

问题描述 投票：0回答：1

我正在按照我在堆栈溢出其他地方找到的指导在 django 中克隆我的空表单。 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>

编辑/更新： 因此，似乎发生的情况是 javascript/query 函数没有复制物化想要用作下拉内容的内容。 相反，发生的情况是脚本将该 ul 附加到 #empty_form。 因此，如果我点击“添加表单”按钮 3 次，空表单将有 4 个 ul（原始表单 + 3 个），而新表单将没有任何 ul。

演练：

单击按钮添加空表单后，我有一个没有 ul 的空表单，这使得下拉列表显示为空。

enter image description here

我们可以看到这个新表单中没有 ul 来引用下拉内容。 enter image description here

但是，如果我们查看空白表单，它现在有 2 个 ul。 enter image description here

我相信“.append()”或“.html()”导致了这个问题。

<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>
javascript python css django materialize
1个回答
0
投票

问题：

在您的代码中，您正在初始化您的选择下拉列表，该下拉列表位于开始时的“#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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.