symfonyフォームはページを再ロードせずにサブミットします

Question

この問題は既に解決されていますが、私の問題を解決する方法は見つけられません。

私はSymfonyプロジェクトを持っています。このプロジェクトでは、地図上にマーカーを配置する必要があります。マーカーをクリックすると、モーダルウィンドウがフォームで表示されます。これは正常に動作します。 私の問題は、マーカーのフォームを送信したいときに、ページが再ロードされ、現在のマーカーがすべて削除され、私はそれを望んでいないということです。 多くのWebサイトやチュートリアルで検索してみましたが、ajaxを使うのが「最高の」解決策だとわかりましたが、使用しようとすると何も起こりません。ここで

は私のAjaxの機能である：

$('#formStep').on('submit', function(e) { 
    e.preventDefault(); 

    $.ajax({ 
     type: $(this).attr('method'), 
     url : $(this).attr('action'), 
     data: $(this).serialize() 
    }); 
}); 

テンプレート/フォーム：

<div class="modal-body"> 
    {{ form_start(formEtape, {'id': 'formStep', 'attr': {'action': path('h3_k_add_step')}}) }} 
    <ul class="nav nav-pills" role="tablist"> 
     <li role="presentation" class="active"><a href="#Nom" aria-controls="home" role="tab" data-toggle="tab">Nom</a></li> 
     <li role="presentation"><a href="#Question" aria-controls="profile" role="tab" data-toggle="tab">Question</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div role="tabpanel" class="tab-pane fade in active" id="Nom"> 
     <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;"> 
      <span class="input-group-addon" id="basic-addon1">Nom*</span> 
      {{ form_widget(formEtape.nom, {'attr': {'class': 'form-control input-sm glowing-border'}}) }} 
     </div> 
     <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;"> 
      {{ form_widget(formEtape.longitude, {'id': 'etape_longitude', 'attr': {'class': 'form-control input-sm glowing-border'}}) }} 
     </div> 
     <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;"> 
      {{ form_widget(formEtape.latitude, {'id': 'etape_latitude', 'attr': {'class': 'form-control input-sm glowing-border'}}) }} 
     </div> 
     <div class="input-group" style="margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;"> 
      <span class="input-group-addon" id="basic-addon1">Indication pour se rendre <br>à l'étape suivante</span> 
      {{ form_widget(formEtape.transit, {'attr': {'class': 'form-control input-sm glowing-border'}}) }} 
     </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
    {{ form_widget(formEtape.submit, {'id': 'step_submit', 'attr': {'class': 'btn btn-success'}}) }} 
    {{ form_end(formEtape) }} 
    </div> 

とコントローラ：

public function addStepAction(Request $request){ 
    $session = $request->getSession(); 

    $etape = new Etape(); 
    $formEtape = $this->createForm(newStepType::class, $etape); 
    if ($request->isXmlHttpRequest()) {{ 
     $em = $this->getDoctrine()->getManager(); 
     $em->persist($etape); 
     $em->flush(); 

     $this->addFlash('success', 'L\'étape a bien été ajoutée !'); 
     return new JsonResponse(array('message' => 'Success!'), 200); 
     } 
    } 

}

Answer 1

あなたの質問は何をしていませんウィットをするh AJAX：あなたのフォームは、通常のリクエストでも動作しません。

あなたが要求を処理するために、あなたのフォームを指示する必要があります：

//add this 
$formEtape->handleRequest($request); 

$etape = new Etape(); 
if ($request->isXmlHttpRequest()) {{ 

あなたが再びこのような問題に直面している場合は、このようなデバッグ文を追加しよう：

if ($request->isXmlHttpRequest()) { 
    //your script 
} else { 
    echo 'no XmlHttpRequest made'; 
} 

あなたのスクリプトが何をしているのか理解するのに役立ちます。