Используете ajax для отправки нескольких форм в Symfony 3?

Question

Я пытаюсь создать динамическую двухэтапную форму, используя Jquery, где на «шаге 1» я хочу отправить данные формы без обновления своей страницы, чтобы я мог скрыть свое HTML-разделение, содержащее мою форму, и показать другоепредставление моего шага 2 с использованием Jquery.

Проблема в том, что я использую коллекцию форм в своем действии контроллера следующим образом:

public function indexAction(Request $request)
{

$user = $this->getUser();
$em = $this->getDoctrine()->getManager();
$repository = $em->getRepository('ATPlatformBundle:NoteDeFrais');


$form = $this->get('form.factory')->createBuilder(FormType::class)
->add('ndf', CollectionType::class,array(
'entry_type'   => NoteDeFraisType::class,
'label'        => false,
'allow_add'    => true,
'allow_delete' => true,
))
->getForm(); 

И я получаю данные формы, отправленныепримерно так:

if ($request->isMethod('POST') && $form->handleRequest($request)->isValid()
&& isset($_POST['next_button'])) {

$notesDeFrais = $form['ndf']->getData();

foreach ($notesDeFrais as $ndf) {
$ndf->setUser($user);
$em->persist($ndf);
}

$em->flush();

}

elseif (isset($_POST['validate_button'])) {

foreach ($listNdf as $ndf) {
$ndf->setSubmitted(true);
}
$em->flush();
}

Итак, я хотел знать, как отправить мои данные с помощью запроса ajax и как получить их из моего действия.До сих пор я пытался действовать так, но это (логически) не работает.

$("div#bloc_validation").css("display", "none");

$("#next_button").click(function(){

$(".form_ndf").each(function(){

$.post("{{ path('platform_homepage') }}",
{ndf: $(this).serialize()}, //My issue is here
function(){
alert('SUCCESS!');
}
);
});

$("div#form_bloc ").css("display", "none");
$("div#bloc_validation").css("display", "block");
});

У вас есть идеи?Заранее спасибо

Answer 1

Наиболее простой подход заключается в следующем:

добавить блок javascripts в ваш файл ветки с содержимым, как показано ниже. Измените appbundle_blog в первой строке внутри функции .ready () в имени вашей формы .(Проверьте ваш html, чтобы найти его).

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

{% block body %}
    {{ form_start(edit_form) }}
        {{ form_widget(edit_form) }}
        <input type="submit" value="Save Changes" />
    {{ form_end(edit_form) }}
{% endblock %}

{% block javascripts %}
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous">
    </script>
    <script>
        $(document).ready( function() {
          var form = $('form[name=appbundle_blog]');

          form.submit( function(e) {
            e.preventDefault();
            $.ajax( {
              type: "POST",
              url: form.attr( 'action' ),
              data: form.serialize(),
              success: function( response ) {
                console.log( response );
              }
            });
          });
        });
    </script>
{% endblock %}

Если форма была отправлена, вы должны ответить на запрос AJAX.Поэтому вы можете отобразить другой шаблон ..

/**
 * Displays a form to edit an existing blog entity.
 *
 * @Route("/{id}/edit", name="blog_edit")
 * @Method({"GET", "POST"})
 */
public function editAction(Request $request, Blog $blog)
{
    $editForm = $this->createForm('AppBundle\Form\BlogType', $blog);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $this->getDoctrine()->getManager()->flush();

        /* render some new content */
        return $this->render('blog/ajax.html.twig', array(
            'blog' => $blog,
        ));
    }

    return $this->render('blog/edit.html.twig', array(
        'blog' => $blog,
        'edit_form' => $editForm->createView(),
    ));

Или ответить в JSON:

use Symfony\Component\HttpFoundation\JsonResponse;

/**
 * Displays a form to edit an existing blog entity.
 *
 * @Route("/{id}/edit", name="blog_edit")
 * @Method({"GET", "POST"})
 */
public function editAction(Request $request, Blog $blog)
{
    $editForm = $this->createForm('AppBundle\Form\BlogType', $blog);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $this->getDoctrine()->getManager()->flush();

        return new JsonResponse(array(
            'status' => 'success',
            // ...
        ));
    }

    return $this->render('blog/edit.html.twig', array(
        'blog' => $blog,
        'edit_form' => $editForm->createView(),
    ));
}

Если вы хотите, вы даже можете проверить, является ли запрос AJAX-запросом или нет:

if($request->isXmlHttpRequest()) {
    // yes it is AJAX
}