Передача значения из bootstrap в django modal

Здесь я пытаюсь передать значение вне модального цикла с помощью ajax

вот мой template.html

               {% for compliance in compliance %}
                    {% complience_category compliance request.user as compliances %}
                    {% for qualification in compliances %}
                    .....
                    .....
                    <td>
                        <button data-id="{{ qualification.id }}" type="button" class="btn btn-warning margin-bottom edit-qualification">
                            edit
                        </button>
                    </td>
                    ....
                    .....
                    {% endfor %}
                    {% csrf_token %}
                <div class="modal hid fade" id="modal-default">
                    <form class="form-horizontal" method="POST" enctype="multipart/form-data" action=" {% url 'update_qualifications' qualification.id %}"> 
                        {% csrf_token %}

                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3>Update Compliance</h3>
                            </div>
                            <div class="modal-body">
                                <div class="control-group">
                                    <label class="control-label" for="inputdate_{{qualification.id}}">Expiry Date</label>
                                    <div class="controls">
                                            <input type="date" id="inputdate_{{qualification.id}}" name="expiry_date" value="{{qualification.expiry_date|date:'Y-m-d'}}">
                                       
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                
                                <button class="btn" data-dismiss="modal">Close</button>
                                <button class="btn btn-primary" type="submit">Save</button>
                            </div>


                    </form>
                </div>

                {% endfor %}

Это мой AJAX

$(document).on('click','.edit-qualification',function(){
    var id = $(this).data('id');

    $.ajax({
        url:'',
        type:'POST',
        data:{
            'id':id,
            'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val(),
        },
        success:function(data){
            $('#edit_modal .modal-dialog').html($('#edit_modal .modal-dialog',data));
            $('#edit_modal').modal('show');
            
        },
        error:function(){
            console.log('error')
        },
    });
});
</script>

Здесь мой модал находится вне цикла for

Вот моя проблема: когда я нажимаю на кнопку редактирования, мое модальное всплывающее окно не работает (это означает, что при нажатии на кнопку редактирования у меня ничего не работает)

Здесь мой модал находится вне цикла for

Судя по всему, модальное окно все еще находится внутри for loop.

{% for compliance in compliance %}
     ...
     ...
     # your modal is here...
{% endfor %}

Я бы предложил разместить модальное окно за пределами loop.

Еще одно замечание: использование Ajax здесь действительно излишне, если я не понимаю, с какой целью вы его используете.

Однако для edit button я бы предложил добавить два атрибута: data-toggle и data-target. Пример:

<button data-toggle="modal" data-target="#myModal">
     edit
</button>

В вашем случае для модального div у вас есть id: id="modal-default". Это должно быть присвоено атрибуту data-target вашей кнопки. data-target="#modal-default".

Итак, вместо edit button у вас должно быть следующее:

<button data-toggle="modal" data-target="#modal-default" data-id="{{ qualification.id }}" type="button" class="btn btn-warning margin-bottom edit-qualification">
     edit
</button>

Идеально, это должно работать для отображения модала.

Что касается вопроса о том, как передать значения в модальное окно, если нажата определенная кнопка редактирования, то я бы предложил вам посмотреть этот ответ здесь, так как он может быть очень полезен.

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