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。

此代码工作正常，但问题是在提交控制器后返回一个新页面并将其放入模态但重定向到其他URL。

Answer 1

您可能希望return false;中的validateInterview1()：

function validateInterview1() {

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

    return false;
}

在此处添加return：

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

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

注意：由于您使用的是jQuery，因此可能会使用e.preventDefault()，answer对这些差异有完整的解释。

使用ajax和symfony2提交模态表单

1 个答案: