使用 ajax 和 symfony2 提交模态表单

Question

我有一个包含表单的模态

    <div class="modal-header">
            <a href="#" class="float-right" data-placement="left" title="close" data-dismiss="modal">
                <i class="glyph-icon icon-remove"></i>
            </a>
        </div>
<div class="modal-body">
<form id="FormInterview1" class="left-side" action="{{ path('ts_admin_HMaffectCandidate',{'id':id})}}"  method="post"{{form_enctype(form1) }}>
 <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="">
                       {{form_label(form1.evaluators)}}
                    </label>
                </div>
                <div class="form-input col-md-8">
                    {{form_widget(form1.evaluators,{'attr': {'class': 'chosen-select'}})}}
                </div>
            </div>           
                <div class="form-row">
                <div class="form-label col-md-4">
                    <label for="">
                       {{form_label(form1.competances)}}
                    </label>
                </div>
                <div class="form-input col-md-8">
                    {{form_widget(form1.competances,{'attr': {'class': 'chosen-select'}})}}
                </div>
            </div>
     <input type="submit" onclick="validateInterview1();" value="Submit" name="submitActionInt1" class="btn medium primary-bg" />                     
  </div>
     {{ form_rest(form1) }}
</form>
</div>
<div class="modal-footer">

        <button type="button" data-dismiss="modal" aria-hidden="true"  class="center btn medium primary-bg">Close</button>
    </div>

我使用 ajax 提交此模态

    <script>
        function validateInterview1() {
    var data = $("#FormInterview1").serialize() ;
                $.ajax({
                        type: 'POST',
                        data: data,
                        url:$("#FormInterview1").attr('action'),
                        beforeSend: function () {
                        document.getElementById('loaderInt1').style.display = 'block';
                        },
                        success: function (data) {
                        $('#form1').html(data);
                      document.getElementById('loaderInt1').style.display = 'none';
                       },
                        error: function ()
                        {  
                        alert('Error ajax');
   document.getElementById('loaderInt1').style.display = 'none';
                        }
                });
        }
    </script>

在我的控制器中我保留了新数据

 if ($request->getMethod() == 'POST') {
               if ($this->getRequest()->request->get('submitActionInt1') == 'Submit') {
                $em = $this->getDoctrine()->getManager();
                $form1->bind($request);
                if ($form1->isValid()) {
                $interview1->setState(0);
                $candidate->setInterview1($interview1);
                $em->persist($candidate);
                $em->flush();
                 }  
              }
              return  $this->render('TSAdminBundle:Status:FormInterview1.html.twig'
                            , array(
                        'id' => $id,
                        'form1' => $form1->createView()));
            }

在坚持之后我想发送一个包含新表单的新 html 页面并将其显示到模态中而不关闭模态并且不将我重定向到另一个 url.

此代码工作正常，但问题是在提交控制器 return 一个新页面并将其放入模态但将我重定向到其他 url.

Answer 1

您可能想要 return false; 在 validateInterview1():

function validateInterview1() {

    var data = $("#FormInterview1").serialize();
    $.ajax(...);

    return false;
}

并在此处添加 return：

<input type="submit" onclick="return validateInterview1();"  />

这是为了防止默认操作（提交表单）在您 post 您的数据之后发生。

NB : Since you're using jQuery, you might be tempted to use e.preventDefault(), this answer has a very complete explanation on the differences.

使用 ajax 和 symfony2 提交模态表单

Submit modal form with ajax and symfony2

ajax

post

symfony

bootstrap-modal