渲染一个完整的树枝模板，在Symfony中使用ajax扩展另一个

Question

我的主布局名为layout.html.twig 。 在此布局中，我将块内容扩展为他，请参见代码：

<!DOCTYPE html>
  <html>
  <!-- my html code, meta header, body ... etc -->
    <body>
      <div class="col-md-12 panel panel-default" id="content">
        {% block content %}
          {# extend content to the principal layout #}
        {% endblock %}
      </div>
    </body>
  </html>

实际上，每次我想在{% block content %} 加载另一个页面内容时，我都会像这样在indexEquipement.html.twig扩展布局：

{% extends "MyBundleBundle::layout.html.twig" %}

  {% block content %}

    <div class="page-header">
      <h4>add an equipement</h4>
    </div

    <select id="selectEquipement">
      <option selected disabled>choose an equipement</option>
      <option value="{{ path('addEquipement1') }}">Equipement 1</option>
      <option value="{{ path('addEquipement2') }}">Equipement 2</option>
    </select>

  {% endblock %}

这是索引的路由文件：

indexEquipements:
    path:     /manageEquipements
    defaults: { _controller: MySpaceMyBundle:ManageEquipements:indexEquipements }
    requirements:
    methods: GET

如您所见，在此示例中，我具有一个带有url的select标记，用于values选项。 我尝试使用Ajax渲染我选择的视图，而不重新加载浏览器页面。

选项值的每个URL实际上都是具有不同形式的视图。 我在自己的选择中选择一个选项，而ajax在同一页面中返回与我的选择匹配的表单。

请参阅我的控制器以了解设备1 addAction() ：

/**
 *
 * @Route("/manageEquipement/addEquipement1", name="addEquipement1")
 * @Method("get")
 */
public function addEquipements1Action() {

    $eq = new Equipement1;

    $form = $this->createForm(new Equipement1Type(), $eq);

    $request = $this->getRequest();

    if ($request->isMethod('POST') | ($form->isValid())) {

        $form->bind($request);

        $em->persist($eq);
        $em->flush();

        return $this->redirect($this->generateUrl('indexEquipements'));

    }  else {

        return $this->render('MySpaceMyBundle:MyFolder:addEquipement1.html.twig', array('form' => $form->createView() ));
    }
}

现在执行此操作的路由文件：

addEquipement1:
    path:     /manageEquipement/addEquipement1
    defaults: { _controller: MySpaceMyBundle:ManageEquipements:addEquipement1 }
    requirements:
    methods: GET

addEquipement1_process:
    path:     /manageEquipement/addEquipement1/process
    defaults: { _controller: MySpaceMyBundle:ManageEquipements:addEquipement1 }
    requirements:
    methods: POST

如何在Ajax中呈现addEquipement1Action()的表单？

##编辑##

这是addEquipement1Action（）的控制器操作：

/**
 *
 * @Route("/manageEquipement/addEquipement1", name="addEquipement1")
 * @Method("get")
 */
public function addEquipement1Action() {

    $request = $this->getRequest();

    $eq = new Equipement1;

    $form = $this->createForm(new Equipement1Type(), $eq);

    if($request->isXmlHttpRequest()){

        $template = $this->forward('MySpaceMyBundle:MyFolder:addEquipement1.html.twig', array('form' => $form->createView() ))->getContent();

        $json = json_encode($template);
        $response = new Response($json, 200);
        $response->headers->set('Content-Type', 'application/json');


        if ($request->isMethod('POST') | ($form->isValid())) {

            $form->bind($request);

            $em->persist($eq);
            $em->flush();

            return new Symfony\Component\HttpFoundation\RedirectResponse($this->generateUrl('indexEquipements'));

        }  else {

            return $response;
        }
    }
}

这是设备的索引：{％扩展了“ MyBundleBundle :: layout.html.twig”％}

  {% block content %}

    <div class="page-header">
      <h4>add an equipement</h4>
    </div

    <select id="selectEquipement">
      <option selected disabled>choose an equipement</option>
      <option value="{{ path('addEquipement1') }}">Equipement 1</option>
      <option value="{{ path('addEquipement2') }}">Equipement 2</option>
    </select>

    <div id="formEquipement"></div>

    <script type="text/javascript">
      $('#selectEquipement').change(function(event) {
        $.ajax({
          type: "GET",
          url: "{{ path('addEquipement1') }}",
          dataType: "html",
          success: function(data){
          $("formEquipement").append(data);
          }
        });
      });
    </script>

  {% endblock %}

当我在select标记中应用选择时，我可以在浏览器中调试ajax调用时看到，但它向我返回了有关我要显示的视图的此错误：

控制器必须返回响应（给定null）。 您是否忘记在控制器的某处添加return语句？

这是我的addEquiment1.html.twig树枝视图：

<form action="{{ path('addEquipement1_process') }}" method="POST" {{ form_enctype(form) }}>
  <div class="col-md-5">
    <br>
    <div>
      {{ form_errors(form) }}
    </div>
    <br>
    <div>
      {{ form_widget(form) }}
    </div>
    <br>
    <div>
      {{ form_rest(form) }}
    </div>
    <br>
    <div>
      <input type="submit" value="Add" class="btn btn-small btn-success"/>
    </div>
  </div>
</form>

如何在不使用Ajax刷新浏览器的情况下在我的实际页面中正确呈现此视图？

Answer 1

如何在Ajax中呈现addEquipement1Action（）的表单？

您可以将表单放在div容器中，并通过客户端中的JS解析出来
或者您将树枝视图分开。 在yourform.html.twig的块中包含indexEquipement.html.twig形式，并在控制器中添加if语句，如果设置了参数onlyForm ，则呈现yourform.html.twig else indexEquipement.html.twig 。 当然，您也可以使用其他路由和控制器操作来删除if语句，这可能会更好看。

渲染一个完整的树枝模板，在Symfony中使用ajax扩展另一个

问题描述

##编辑##

1 个解决方案

解决方案1
1 已采纳 2015-04-20 16:47:23

渲染一个完整的树枝模板，在Symfony中使用ajax扩展另一个

问题描述

##编辑##

1 个解决方案

解决方案1 1 已采纳 2015-04-20 16:47:23

解决方案1
1 已采纳 2015-04-20 16:47:23