Symfony表单提交而不重新加载页面

时间:2016-04-22 09:35:50

标签: ajax symfony

我知道这个问题已经奠定,但我无法找到解决问题的方法。

所以我有一个Symfony项目。在这个项目中,我需要在地图上放置标记,当我点击这些标记时,会打开一个带有表单的模态窗口。这很好用。 我的问题是,当我想提交标记的形式时,页面会重新加载,所有现有标记都会被删除,我不想要它。 我搜索了许多网站和教程,我发现使用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);
       }
  }

}

1 个答案:

答案 0 :(得分:1)

您的问题与AJAX无关:您的表单也无法处理正常请求。

您必须告诉您的表单处理请求:

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

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

当您再次面临这样的问题时,请尝试添加如下的调试语句:

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

这将有助于了解您的脚本正在做什么。