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 for value选项的select标记。我尝试使用ajax呈现我的选择选项视图，而不重新加载浏览器页面。

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

请参阅我的控制器以获取Equipement 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()的表单？

## EDIT ##

这是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;
        }
    }
}

这是设备索引： {％extends＆＃34; MyBundleBundle :: layout.html.twig＆＃34; ％}

  {% 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 %}

当我在我的选择标签中应用选项时，我可以看到我在浏览器中调试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其他indexEquipement.html.twig 。您当然也可以使用不同的路由和控制器操作来删除if语句，这可能会更好阅读。

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

## EDIT ##

1 个答案: