Symfony 4 - 提交 Ajax 表格

Question

在我的項目 Symfony 4 我有一個填寫表格的頁面。 在這一點上，我必須在某個時刻到 select 一輛車。 我想為用戶提供在“車輛”字段右側添加 ajax 的可能性。 一旦它被添加到數據庫中，他也會添加到他的列表中，以便他可以 select 它。 我看了一個教程來做幾乎同樣的事情。 我在我的 controller 中創建了我的 function，並且我設法生成了模態 window 並帶有進入新車的表格。 但我無法真正提交並使其出現在列表中。

目前，我有這個：

它是在數據庫中添加一個車輛，它出現在我的主窗體的字段列表中。 “Véhicule de service”字段（最后一個字段）。

所以，我這樣做了：

我創建了一個 function 控制器來添加車輛：

/**
     * Pour créer un nouveau véhicule
     * 
     * @Route("/manage/ordreMission/new/new_vehicule", name="vehicule_create")
     * @Method({"POST"})
     * @return Response
     */
    public function createVehicule(Request $request, ObjectManager $manager)
    {
        $vehicule = new Vehicule();

        $form = $this->createForm(VehiculeType::class, $vehicule, [
            'action' => $this->generateUrl($request->get('_route'))
        ])
            ->handleRequest($request);

        if ($form->isSubmitted() && $form->isValid()) {
            $manager->persist($vehicule);
            $manager->flush();
            return $this->json([
                'code' => 200,
                'message' => 'OK',
                'vehicule' => $vehicule,
            ], 200);
        }

        return $this->render('ordre_mission/partials/newVehicule.html.twig', [
            'formVehicule' => $form->createView(),
        ]);
    }

我在 Twig 中創建了我的表單視圖：

{# ordre_mission/partials/newVehicule.html.twig #}
{# http://127.0.0.1:8000/manage/ordreMission/new/new_vehicule #}

{{form_start(formVehicule)}}
{{ form_widget(formVehicule) }}
<div class="form-group row">
    <div class="col-sm-2"></div>
    <div class="col-sm-10">
        <button type="submit" class="btn btn-primary" data-label="Enregistrer">
            Enregistrer
        </button>
    </div>
</div>
{{ form_end(formVehicule) }}

在我的主要 Twig 視圖（使用第一種形式）中，我添加了一個模態和 Ajax 來添加我的車輛：

   {% extends "base.html.twig" %}

{% block stylesheets %}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet"/>
{% endblock %}

{% block body %}

    {{form_start(form)}}
    {{form_row(form.user)}}
    {{form_row(form.accompagnateur)}}
    {{form_row(form.entreprise)}}
    {{form_row(form.lieu)}}
    {{form_row(form.motif)}}
    {{form_row(form.date)}}
    {{form_row(form.transport)}}
    {{form_row(form.immatriculationVehiculeService)}}
    {# champs où je vais pouvoir ajouter un véhicule #}
    <button class="btn btn-primary" type="submit">Enregistrer</button>
    {{form_end(form)}}

    <button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        <i class="fa fa-plus"></i>
        Ajouter un véhicule
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalTitle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalTitle">Ajout d'un article</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body"></div>
            </div>
        </div>
    </div>

    <div id="ajax-results">here comes the result</div>

{% endblock %}

{% block javascripts %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>


    <script>
        $('.js-example-basic-single').select2({placeholder: 'Choisissez un agent', allowClear: true, language: 'fr'});
    </script>

    <script>
        $('#exampleModal').on('shown.bs.modal', function () {
            var modal = $(this);
            $.ajax('{{ path('vehicule_create') }}', {
                success: function (data) {
                    modal.find('.modal-body').html(data);
                }
            });
        });
        $(document).on("submit", "form", function (e) {

            e.preventDefault();
            console.log(e.target.id);

            var id = e.target.id;

            if(id == "formVehicule")
            {

                $formVehicule = $(e.target);
                modal = $('#exampleModal');


                var $submitButton = $formVehicule.find(':submit');
                $submitButton.html('<i class="fas fa-spinner fa-pulse"></i>');
                $submitButton.prop('disabled', true);

                $formVehicule.ajaxSubmit({
                    type: 'post',
                    success: function (data) {
                        if (data.message == 'OK') {
                            var sel = document.getElementById("ordre_mission_immatriculationVehiculeService");
                            var opt = document.createElement('option');
                            opt.appendChild(document.createTextNode(data.vehicule.vehiculeString));
                            opt.value = data.vehicule.immatriculation;
                            sel.appendChild(opt);
                            modal.modal('toggle');
                        } else {
                            modal.find('.modal-body').html(data);
                        }
                    },
                    error: function (jqXHR, status, error) {
                        $submitButton.html(button.data('label'));
                        $submitButton.prop('disabled', false);
                    }
                });
            }
            else
            {
                e.target.submit();
            }

        });

    </script>

{% endblock %}

更新：（我更新了我的代碼，你可以看到它）

所以一切正常。 但我認為它並不干凈。 問題是當我提交主表單時，它在不應該的時候也進入了監聽器。 所以我必須在車輛創建表單中添加一個 ID，並且在偵聽器中，我必須做出一個條件：

如果表單 ID 與車輛的創建 ID 匹配，則它可以啟動偵聽器代碼。 否則，他必須正常提交表格。

除了我不知道它是否干凈......而且最重要的是，我冒着被引導添加另一種通過模態添加 object 的可能性。 所以它會越來越復雜，不是嗎？

Answer 1

您的錯誤顯示 symfony 找不到路線

“POST /manage/ordreMission/new/new_vehicule”（來自“ http://127.0.0.1:8000/manage/ordreMission/new ”）

您的路線看起來不錯，因此要么您沒有發送“POST”請求（您可以使用瀏覽器中的網絡分析器進行檢查），要么您的 JS 代碼無法正常工作，您實際上可能發送了一個不是 XmlHttpRequest() 的請求。 嘗試在您的路由定義中刪除 condition="request.isXmlHttpRequest()" 以查看它是否有效。