Форма Symfony submit без перезагрузки страницы

Question

Я знаю, что этот вопрос уже заложен, но я не могу найти, как исправить мою проблему.

Итак, у меня есть проект Symfony. В этом проекте мне нужно поместить маркеры на карту, и когда я нажимаю на эти маркеры, модальное окно открывается формой. Это прекрасно работает. Моя проблема в том, что когда я хочу отправить форму маркера, страница перезагружается, и все существующие маркеры удаляются, и я не хочу этого. Я ищу на многих веб-сайтах и ​​учебниках, и я обнаружил, что использование 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'; 
} 

Это поможет понять, что делает ваш скриптинг.