如何在Symfony 4中通过Ajax加载和提交表单

Question

I am loading a form via Ajax to my page:

$('.table tbody').on( 'click', '.edit-item', function (e) {
  var id = $(this).attr("data-id");
  e.preventDefault();
  var $link = $(e.currentTarget);
  $.ajax({
    method:'POST',
    data: {
      "id": id
    },
    url: $link.attr('href')
  }).done(function(data){
    $('.form-output').html(data.output);

    $('#form_save').on( 'click', function (e) {
      e.preventDefault();
      var form = $(this).closest('form');
      var formData = form.serialize();
      alert("save button clicked");
      $.ajax({
        method:'POST',
        url:'{{ path('edit_form', { 'slug': page.slug }) }}',
        data: formData,
        success: function(data){

          alert("success");
        }
      });
    });

  });
});

Controller.php:

 /**
  * @Route("/pages/{slug}/edit", name="edit_form", methods={"POST", "GET"})
  */


  public function toggleArticleHeart($slug, Request $request){

    if($request->request->get('id')){

      $id = $request->request->get('id');
      $item = new User();

      $item= $this->getDoctrine()->getRepository(User::class)->find($id);
      $form = $this->createFormBuilder($item)
      ->add('username', TextType::class, array('attr' => array('class' => 'form-control')))
      ->add('email', EmailType::class, array('attr' => array('class' => 'form-control')))
      ->add('is_active', HiddenType::class)
      ->add('plainPassword', RepeatedType::class, array('type' => PasswordType::class,'invalid_message' => 'The password fields must match.','options' => array('attr' => array('class' => 'password-field')),'required' => false,'first_options'  => array('label' => 'Passwort', 'attr' => array('class' => 'form-control')),'second_options' => array('label' => 'Passwort wiederholen', 'attr' => array('class' => 'form-control')),))
      ->add('cancel', ButtonType::class, array('label' => 'Abbrechen','attr' => array('class' => 'cancel form-btn btn btn-default pull-right close_sidebar close_h')))
      ->add('save', SubmitType::class, array('label' => 'Speichern','attr' => array('id' => 'submit-my-beautiful-form','class' => 'form-btn btn btn-info pull-right','style' => 'margin-right:5px')))
      ->getForm();
      $form->handleRequest($request);


      $response = new JsonResponse(
        array(
          'message' => 'Success',
          'output' => $this->renderView('form.html.twig',
          array(
            'entity' => $item,
            'form' => $form->createView(),
          ))), 200);

          return $response;

        } else {

          $data = $request->request->get('data');
          $entityManager->persist($data);
          $entityManager = $data->getDoctrine()->getManager();
          $entityManager->flush();
          $response = new Response();
          $response->send();
        }
     }

I get the message "save button clicked" but not the message "success".

And there is also an Ajax 500 Error:

Uncaught PHP Exception ErrorException: "Notice: Undefined variable: entityManager"

Answer 1

You need to define and initialize $entityManger in your controller (i.e. $entityManager = $this->getDoctrine()->getManager();) before using it, change your controller as follows:

/**
* @Route("/pages/{slug}/edit", name="edit_form", methods={"POST", "GET"})
*/

public function toggleArticleHeart($slug, Request $request){

   if($request->request->get('id')){

     $id = $request->request->get('id');
     $item = new User();

     $item= $this->getDoctrine()->getRepository(User::class)->find($id);
     $form = $this->createFormBuilder($item)
     ->add('username', TextType::class, array('attr' => array('class' => 'form-control')))
     ->add('email', EmailType::class, array('attr' => array('class' => 'form-control')))
     ->add('is_active', HiddenType::class)
     ->add('plainPassword', RepeatedType::class, array('type' => PasswordType::class,'invalid_message' => 'The password fields must match.','options' => array('attr' => array('class' => 'password-field')),'required' => false,'first_options'  => array('label' => 'Passwort', 'attr' => array('class' => 'form-control')),'second_options' => array('label' => 'Passwort wiederholen', 'attr' => array('class' => 'form-control')),))
     ->add('cancel', ButtonType::class, array('label' => 'Abbrechen','attr' => array('class' => 'cancel form-btn btn btn-default pull-right close_sidebar close_h')))
     ->add('save', SubmitType::class, array('label' => 'Speichern','attr' => array('id' => 'submit-my-beautiful-form','class' => 'form-btn btn btn-info pull-right','style' => 'margin-right:5px')))
     ->getForm();
     $form->handleRequest($request);

     $response = new JsonResponse(
     array(
         'message' => 'Success',
         'output' => $this->renderView('form.html.twig',
         array(
            'entity' => $item,
            'form' => $form->createView(),
         ))), 200);

      return $response;

    } else {

      $entityManager = $this->getDoctrine()->getManager();
      $data = $request->request->get('data');
      // Create Entity object and set it property with setter and then do persist on entity object 
      $entityManager->persist($data);
      $entityManager->flush();
      $response = new Response();
      $response->send();
    }
 }