Widgets not working for dynamically added formset forms

[Dmitri S.]

I have a formset with fields with Select2 widgets and a calendar (date-picker) from django app.

And I use dynamic addition of formset forms.

When I render a template for the first time, all widgets work fine. But when I add new formset form, widgets of this new form don't work.

I think, this ('formset:add') is somehow related to my problem, but I can't figure how to use it.

I also found this: 

$('.django-select2').djangoSelect2();

With this line dropdowns start working, but they become empty.

For adding new form I use 'empty form' and this jQuery:

<script>
$('.buttons').on('click', '#add_form', 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>

Form in HTML:

{% 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 %}
    <div class="form-matter">
        {% 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 %}
    </div>
        <h3>RESOLUTIONS</h3>

        <div id="form_set" name="form_set">
            {{ formset_resolutions.management_form }}
            {% for form in formset_resolutions %}
                <div class="formset-form" name="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>
    <div class="buttons">
        <button class="btn" type="button" id="add_form">ADD</button>
        <button class="btn" type="submit">SAVE</button>
    </div>
    <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>

Other scripts:

<script type="text/javascript" src="/jsi18n/"></script>
<script type="text/javascript" src="/static/js/jquery.js"></script>

{{ form_matter.media.js }}

{{ form_matter.media.js }} are:
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/django_select2/django_select2.js"></script>

[lemme smash]

and you have no errors in browser console?

[Dmitri S.]

Unchecked runtime.lastError: The message port closed before a response was received. in Opera after page loading for the first time and no errors in Chrome. When I add new form no other errors appear.

пятница, 4 октября 2019 г., 10:41:58 UTC+3 пользователь lemme smash написал:

[Dmitri S.]

and after clicking on widgets also no errors

пятница, 4 октября 2019 г., 17:58:22 UTC+3 пользователь Dmitri S. написал:

[lemme smash]

okay, but what you actually mean by "widgets don't work"?
also, from my experience I can say that when you have to work with some dynamic forms is't much better to use pure js on client and only validate it on backend

On Tuesday, October 1, 2019 at 11:41:28 PM UTC+3, Dmitri S. wrote:

[Dmitri S.]

I meant, when I click on Select2 widget (combobox with autocomplete), list of items does not show up. And when I click on calendar icon, calendar does not show up.

"It's better to use pure js" - what do you mean exactly? to make new forms duplicating existing rather than using django empty_form? or to make autocomplete and calendar with pure JS? or...?

воскресенье, 6 октября 2019 г., 17:42:49 UTC+3 пользователь lemme smash написал:

[lemme smash]

okay, i think i got it. you probably need to provide some snippet to reload list of  choices to newly added form. try to look some examples of using django-select2 with formsets...
by pure js i mean not necessarily vanila js, but pure client code, without rendering templates on server. all the problems you have partially (and it's not only my opinion) happens because you trying to combine server-side approach with client code pieces which is always buggy and hard to implement and maintain.  

On Tuesday, October 1, 2019 at 11:41:28 PM UTC+3, Dmitri S. wrote:

[Dmitri S.]

At first I hoped not to dive in JS and mostly use django things, but ok, now I see it's not that simple.

Thanks for help.

вторник, 8 октября 2019 г., 16:49:08 UTC+3 пользователь lemme smash написал: