elo80ka / django-dynamic-formset

A jQuery plugin that allows you dynamically add new forms to a rendered django formset.
677 stars 311 forks source link

Delete buttons don't appear in a modal that is populated with ajax #145

Closed Julio0025 closed 7 years ago

Julio0025 commented 7 years ago

Problem is in the title. Adding new lines and saving them works just fine with ajax. My code.

    $(function() {
        $('#question_form tr.answer_choices').formset({
            'prefix': 'choices',
            'deleteCssClass': 'btn btn-danger',
            'deleteText': '<span class="glyphicon glyphicon-remove"></span>',
            'addCssClass': 'btn btn-success',
            'addText': '<span class="glyphicon glyphicon-plus"></span>',
        });
    });
<form action="{% url "administration:reg_form_questions_update" question_id %}" id='question_form' method="POST" class="form form-horizontal">
  {% csrf_token %}
    <table class="table">
        <thead>
            <tr>
                <th class="col-md-8">Klausimas</th>
                <th>Question type</th>
                <th>Required</th>
            </tr>
        </thead>

                <tbody>
                    <tr class="question-form">
                        <td>
                         {% bootstrap_field question.text form_group_class='' show_label=False %}
                        </td>
                        <td>
                            {% render_field question.type class="form-control" %}
                        </td>
                        <td>
                            {{ question.required }}
                        </td>
                    </tr>
        </table>

    {{ question_formset.management_form }}
<table class="table" id="answers_table">
    <thead>
        <tr>
            <th>Question</th>
            <th>Delete</th>
        </tr>

    </thead>
    <tbody>
        {% for answer_form in question_formset%}
            <tr class="answer_choices"  >
                <td>{% bootstrap_field answer_form.text form_group_class='' show_label=False %}</td>
                {{ answer_form.id.as_hidden }}
                {{ answer_form.program_type.as_hidden }}

            <td>
                {{ answer_form.DELETE.as_hidden }}
            </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

Modal is a generic bootrap modal, i populate modal-body with this ajax succes like this.

 success: function(data) {
                    $('.modal-body').html(data.template);
                    $('#myModalHorizontal').modal('show');
                     $('#answers_table').hide()
.....

What im trying to achieve is to create a question with ajax. If the question is chosen is list or choices, i can add question answer choices with formsets. So i hide/show the table, where the formsets are being created/deleted. Default hide for answer_table is used when the question is cretead, because the default option is text.

Julio0025 commented 7 years ago

https://github.com/elo80ka/django-dynamic-formset/pull/137/files

previous issue fix