AJAXで送信されたsymfonyフォーム

Question

AJAXでSymfonyフォームを送信したいと思います。私はすでにそれをしましたが、私のコードでエラーを見つけることができません。 Submitをクリックすると、フォームが送信されますが、AJAXでは送信されません。

コントローラでフォームを作成します。

$form = $this->createForm(CorrectionReponseQRFormType::class, $passage)->createView(); 

小枝：

{{ form_start(form, {'id': 'formCorrection'~reponse.id}) }} 

     {{ form_widget(form.note, {'id': 'note'~reponse.id}) }} 

     {{ form_widget(form.commentaire, {'id': 'commentaire'~reponse.id}) }} 

     {{ form_row(form.submit) }} 
{{ form_end(form) }} 

<script> 
    var note = document.getElementById("note{{ reponse.id }}").value; 
    var idCommentaire = 'commentaire{{ reponse.id }}'; 

    var commentaire = CKEDITOR.instances[idCommentaire].getData(); 
    $("#formCorrection{{ reponse.id }}").submit(function() { 
     $.ajax({ 
      type: "POST", 
      url: "{{ path('paces_colle_correctioncolleqr_sauvegardercorrectionpassage') }}", 
      data: {note: note, commentaire: commentaire, idReponse: {{ reponse.id}}} 
     }) 
    }); 
</script> 

コントローラー機能：

public function sauvegarderCorrectionPassageAction(Request $request) 
{ 
    if ($request->isXmlHttpRequest()) { 
     $em = $this->getDoctrine()->getManager(); 

     $idReponse = $request->request->get('idReponse'); 
     $reponse = $em->getRepository(ReponseQR::class)->find($idReponse); 
     $note = $request->request->get('note'); 
     $commentaire = $request->request->get('commentaire'); 

     $passerColle = $em->getRepository(PasserColle::class) 
      ->findOneBy(array('colle' => $reponse->getColle()->getId(), 
       'user' => $reponse->getUser()->getId())); 

     $reponse->setCorrigee(true); 
     $passerColle->setNote($note); 
     $passerColle->setCommentaire($commentaire); 
     $em->persist($passerColle); 
     $em->flush(); 

     // Affichage 
     return false; 
    } 
} 

Answer 1

それはBECAです送信ボタンを使用すると、デフォルトでフォームが送信されます。

あなたはevent.preventDefault()

$("#formCorrection{{ reponse.id }}").submit(function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     $.ajax({ 
      type: "POST", 
      url: "{{ path('paces_colle_correctioncolleqr_sauvegardercorrectionpassage') }}", 
      data: {note: note, commentaire: commentaire, idReponse: {{ reponse.id}}} 
     }) 
    }); 

Answer 2

使用するか、またはFALSEを返す使用することができます。このような関数の最後に

$("#formCorrection{{ reponse.id }}").submit(function(event) { 
     $.ajax({ 
      type: "POST", 
      url: "{{ path('paces_colle_correctioncolleqr_sauvegardercorrectionpassage') }}", 
      data: {note: note, commentaire: commentaire, idReponse: {{ reponse.id}}} 
     }); 
     return false; 
});