Виджеты jQuery не работают для динамически добавляемых форм форм - PullRequest
Новая
       10

Виджеты jQuery не работают для динамически добавляемых форм форм

0 голосов
/ 21 сентября 2019

У меня есть форма и связанный набор форм в моем представлении / шаблоне.Для нескольких полей я использую виджеты: Select2 и календарь (указатель даты) из приложения администратора django.

Я также использую динамическое добавление форм набора форм.

При первом отображении шаблона все виджеты работают нормально.Но когда я добавляю новую форму набора форм, виджеты этой новой формы не работают.

Я прочитал существующие вопросы по этой проблеме: 1 , 2 , 3 , 4 , но они либо неприменимы для меня, либо не помогают (2 и 3), либо, может быть, я просто что-то делаю не так (скорее всего- Я новичок в этом).

Очень ценю за любые советы.

HTML: 

{% extends "docs/base.html" %}
{% load static %}

{% block extrahead %}
    {{ block.super }}
    {{ form_matter.media.css }}

    <link href="/static/django_select2/select2.min.css" type="text/css" media="screen" rel="stylesheet">
{% endblock %}

{% block content %}

    {% if mat_id == None %}
        <form id="MatterForm" action="{% url 'matter_create_url' %}" enctype="multipart/form-data" method="post">
    {% else %}
        <form id="MatterForm" action="{% url 'matter_edit_url' mat_id=mat_id %}" enctype="multipart/form-data" method="post">
    {% endif %}

        {% csrf_token %}
        <fieldset>
            {% for field in form_matter %}
                <div class="form-row">
                    {% if field.errors %}
                        <div>{{ field.errors }}</div>
                    {% endif %}
                    <label class="form-label">{{ field.label_tag }}</label>
                    <div class="form-input">{{ field }}</div>
                </div>
            {% endfor %}
            <h3>RESOLUTIONS</h3>

            <div id="form_set">
                {{ formset_resolutions.management_form }}
                {% for form in formset_resolutions %}
                    <div class="formset-form">
                        {% for hidden in form.hidden_fields %}
                            {{ hidden }}
                        {% endfor %}
                        {% for field in form.visible_fields %}
                            <div class="form-row">
                                {% if field.errors %}
                                    <div>{{ field.errors }}</div>
                                {% endif %}
                                <label class="form-label">{{ field.label_tag }}</label>
                                <div class="form-input">{{ field }}</div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </fieldset>
        <br>
        <button class="btn" type="button" id="add_form" style="margin: 0 0 0 25px">ADD</button>
        <button class="btn" type="submit" style="margin: 0 0 0 25px">SAVE</button>
        <br><br><br>
        <div id="empty_form" style="display:none">
            <div class="formset-form">
                {% for field in formset_resolutions.empty_form.visible_fields %}
                    <div class="form-row">
                        {% if field.errors %}
                            <div>{{ field.errors }}</div>
                        {% endif %}
                        <label class="form-label">{{ field.label_tag }}</label>
                        <div class="form-input">{{ field }}</div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </form>

<script type="text/javascript">window.__admin_media_prefix__ = "{% static 'admin/' %}";</script>
<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/django_select2/select2.min.js"></script>
<script>
    $('#add_form').on('click', function() {
        var form_idx = $('#id_resolution_set-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_resolution_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
</script>

<script>$('div.form-row:has(label.form-label:has(label[for$="-DELETE"]))').css('background-color', '#ffc7c7')</script>
{{ form_matter.media.js }}
{% endblock content %}
...