Как отправить django данных набора форм с помощью ajax и соответствующим образом обновить / создать - PullRequest
Новая
       15

Как отправить django данных набора форм с помощью ajax и соответствующим образом обновить / создать

0 голосов
/ 12 февраля 2020

Я использовал django -extra-views , чтобы создать модал, отображающий набор форм. С dynamici c -formset-views я добавил функциональность для динамического добавления и удаления форм из набора форм.

При открытии модального курса мы следуем принципу «многие к одному» и получаем всех сотрудников за определенную стойку. Для каждого экземпляра сотрудника мы создаем форму.

enter image description here

В настоящее время я пытаюсь отправить изменения существующему сотруднику и новым добавленным сотрудникам с помощью ajax в API вместо использования django представления, чтобы я мог отображать потенциальные ошибки, которые возвращаются с сервера, в модальном режиме без перезагрузки страницы.

Проблема:

  1. Как сериализовать данные набора форм? Подходит ли $(form).serialize() здесь или мне нужно создать объект JSON?
  2. Как отличить guish от существующего сотрудника, которого изменил пользователь, и новых сотрудников, добавленных пользователем? Нужно ли сериализовать их отдельно и сделать ajax PATCH для первой и ajax PUT для второй группы? Или мне нужно настроить это поведение в API?

views.py 

class DeskEditEmployeesView(AjaxTemplateMixin, ModelFormSetView):
    model = db_models.DeskEmployeeMap
    ajax_template_name = 'my_modal.html'
    form_class = forms.DeskEmployeeMapForm
    success_url = reverse_lazy('finance:tc_desk')
    slug_field = 'desk'
    factory_kwargs = {'extra': 0, 'can_delete': True}
    api_url = 'api_desk_employee_map-list'

шаблон 

[...]
  <script language="JavaScript">
    function formSuccess(form) {
        location.reload();
    }

    function formError(data) {
        $('#supplier_msg').html("The desk'" + data[0].value + "' already exists.");
    }

    $('#update_desk_employee').on('click', function () {
        const form = $('#form');
        const url = "{% url view.api_url %}";
        const data = form.serialize();

        const settings = {
            url: url,
            data: data,
            dataType: 'json',
            method: 'PUT',
            headers: {
                'content-type': 'application/json',
                'Accept': "application/json; charset=utf-8",
                'X-CSRFToken': "{{ csrf_token }}"
            },
        };

        $.ajax(settings).done(
            function (data) {
                formSuccess(form)
            }
        ).fail(function (response) {
            formError(data)
        })
    })
[...]

API 

class DeskEmployeeMapViewSet(viewsets.ModelViewSet):
    queryset = db_models.DeskEmployeeMap.objects

    serializer_class = serializers.DeskEmployeeMapSerializer

    def put(self, request, *args, **kwargs):
        return super().update(request, *args, **kwargs)

сериализатор 

class DeskEmployeeMapSerializer(serializers.ModelSerializer):
    class Meta:
        model = db_models.DeskEmployeeMap
        fields = '__all__'
...