Django: Как использовать модал в качестве формы для обновления объекта - PullRequest
Новая
       19

Django: Как использовать модал в качестве формы для обновления объекта

0 голосов
/ 12 января 2019

Я пытаюсь использовать модал в качестве формы для редактирования, но я не знаю хорошего способа.

В настоящее время мой views.py такой. 

def edit_entry(request, entry_pk):

    entry = get_object_or_404(Entry, pk=entry_pk)

    if request.method != 'POST':
        form = EntryForm(instance=entry, user=request.user)
    else:
       form = EntryForm(instance=entry, data=request.POST, user=request.user)

        if form.is_valid():
            form.save()

и у меня есть шаблон для этого представления.

Что я хочу сделать, так это со страницы, на которой перечислены несколько объектов ввода, форма редактирования объекта отображается при нажатии кнопки редактирования. 

{% for entry in entries %}
    ...
    <button class="btn btn-outline-primary" data-toggle="modal" data-target="#editEntryModal">Edit</button>

    <!-- modal for the object -->

Кто-нибудь, кто мог бы дать мне советы?

Ответы [ 3 ]

0 голосов
/ 12 января 2019

то, что вы пытаетесь сделать возможным только с помощью шаблона django. вам нужен JS или JQuery или любой внешний интерфейс.

когда вы нажимаете кнопку редактирования. В текущем домене появится редактирование из, и вам нужно сделать ajax-вызов, чтобы получить исходные данные для редактирования. Отредактируйте данные и отправьте данные vai ajax и в бэкэнде обновите объект. django rest framework больше подходит для такого рода задач.

0 голосов
/ 21 июня 2019

У меня была похожая задача, и я сначала создал запрос ajax из шаблона для загрузки данных: 

<script>
$(document).ready(function(){
  $("#myBtn").click(function(){
    var pk = $(this).data('pid')
    $("#myModal").modal("show");
  });
  $("#myModal").on('show.bs.modal', function(event){
    var modal = $(this)
    var pk = $(this).data('pid')
    $.ajax({
        data: {'pk': pk},
        url: "{% url 'search:load_paper' %}",
        context: document.body,
        error: function(response, error) {
            alert(error);
        }
    }).done(function(response) {
        modal.html(response);
    });
  });
});
</script>

Функция load_paper выглядит следующим образом: 

def load_paper(request):
    pk = request.GET.get('pk')
    object = get_object_or_404(Paper, pk = pk)
    form = PaperForm(instance=object)
    return render(request, 'edit_paper_modal.html', {
        'object': object,
        'pk': pk,
        'form': form,
        })

Данные отображаются в файле edit_paper_modal.html, который выглядит следующим образом: 

<div class="modal-dialog modal-lg" role="document">
    <form action="{% url 'search:edit_paper' pk=object.pk %}" method="post" class="form" enctype="multipart/form-data">
      {% csrf_token %}
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Edit Paper</h4>
            </div>
            <div class="modal-body">
              {% csrf_token %}
              {{form|crispy}}
              {{ form.media }}
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <input type="submit" class="btn btn-primary" value="Save changes" />
            </div>
        </div><!-- /.modal-content -->
    </form>
</div>

Ключевым моментом здесь является то, что я передаю pk статьи обратно функции edit_paper в views.py, которая фактически сохраняет форму. Надеюсь, что это полезно!

0 голосов
/ 12 января 2019

Вам необходимо отправить обратно свою форму в виде html и вставить ее в модальное поле перед тем, как показывать ее. поэтому при нажатии вы сначала запросите ajax, и он вернет вашу форму в формате html. Например, 

def edit_entry(request, entry_pk):
   ....
   entry = get_object_or_404(Entry, pk=entry_pk)

   if request.method != 'POST':
       form = EntryForm(instance=entry, user=request.user)
       return HttpResponse(form.as_p())   # This will return the plain html of a form
   ....

Надеюсь, это поможет!

...