Django - Отправка нескольких встроенных форм с помощью ajax

Я определил модель Usercomp для данных пользователя, связанную со стандартной моделью User с отношениями OneToOne. Таким образом, у меня есть 2 формы для обновления данных пользователя: возможно ли управлять POST запросом с помощью ajax?
. На данном этапе изменение модели не является приемлемым вариантом, даже это, вероятно, облегчило бы работу. Кроме того, я знаю, как управлять этим без javascript. Поэтому я делаю этот пост для лучшего понимания технической среды, которую я открываю для себя.

Первый вопрос: имеет ли это смысл?
Я перешел на js для GET-запроса, чтобы заполнить формы в модальном окне для редактирования существующих строк, поэтому я задаюсь вопросом, хорошая ли это идея сделать POST-запрос таким образом?

Тогда второй вопрос: как действовать дальше?
Вот некоторые фрагменты кода, которые я пробовал до сих пор:
user_profile.html (модальная форма):

<div class="row modal-content">
    <div class="modal-body">
        <div class="col-lg-12 align-items-center text-center">
            <form id="upd-user" action="." method="post" url-endpoint="{% url 'polls:upd_user_detail' %}" 
                    comp-slug="{{ comp_slug }}" usr-id="{% if usr_id %} {{ usr_id }} {% else %} 0 {% endif %}">
                {% csrf_token %}

                {{ user_form }}            <!-- standard user data - simplified code -->
                {{ usercomp_form }}        <!-- custom user data - simplified code -->

                <button class="btn btn-success" type="submit">{% if usr_id %}Mettre à jour{% else %}Créer{% endif %}</button>
                &nbsp &nbsp &nbsp
                <a class="btn btn-secondary back_btn"  data-dismiss="modal">Annuler</a>
            </form>
        </div>
    </div>
</div>

Модал встроен в этот фрагмент:

    <div id="usr_detail" class="modal fade hide" role="dialog" tabindex='-1'>
        <div class="modal-dialog modal-lg">
            <div class="modal-content usr_form_content">
                {% include './user_profile.html' %}
            </div>
        </div>
    </div>

Javascript функция отправки:

    $(".usr_form_content").on("submit", "#upd-user", function(event) {
        event.preventDefault();
        $.ajax({
            method: 'POST',
            url: $(this).attr('url-endpoint'),
            data: {
                comp_slug: $(this).attr('comp-slug'),
                usr_id: $(this).attr('usr-id'),
                user_form: user_form.serialize(),
                usercomp_form: usercomp_form.serialize()
            },
            success: handleSuccess,
            error: handleError,
        });

        function handleSuccess(data) {
            $("#usr_detail").modal("hide");
        };

        function handleError(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        }

    })

Сообщение об ошибке вполне понятно:

Uncaught ReferenceError: user_form is not defined

Теперь мне нужно сделать переход между формой и js, вероятно, мне нужно связать эти значения с $('this), но я не знаю как.

Если это поможет, вот представление GET:

    comp_slug = request.GET["comp_slug"]
    company = Company.get_company(comp_slug)
    usr_id = int(request.GET["usr_id"])   # comes as string when 0

    if usr_id > 0:
        profile_user = User.objects.get(pk=usr_id)
        user_form = UserBaseForm(instance=profile_user)
        usercomp_form = UserCompForm(instance=profile_user.usercomp)
        user_form.fields['username'].disabled = True   # Disable updates of the field
    else:
        user_form = UserBaseForm()
        usercomp_form = UserCompForm()

    context = {
        "comp_slug": comp_slug,
        "company": company,
        "usr_id": usr_id,
        "user_form": user_form,
        "usercomp_form": usercomp_form,
    }

    template = render_to_string('polls/user_profile.html', context=context, request=request)

    return JsonResponse({"user_template": template})

И связанная js часть (она работает нормально - я пытался сгенерировать необходимые переменные на этом этапе, но и это не сработало)

    $('.update-user').click(function() {
        $.ajax({
            method: 'GET',
            url: $(this).attr('url-endpoint'),
            data: {
                comp_slug: $(this).attr('comp-slug'),
                usr_id: $(this).attr('usr-id'),
            },
            success: handleSuccess,
            error: handleError,
        });

        function handleSuccess(data) {
            // let user_form = data.context["user_form"]
            $(".usr_form_content").html(data.user_template);
        };

        function handleError(error_data) {
            console.log("error");
            console.log(error_data);
        };
    })

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