如何在Symfony2中的Bootstrap模式弹出窗口中动态显示数据

我想在Modal Popup中显示一个编辑表单，其中包含相应ID的信息。 换句话说，我想在链接点击的模态弹出窗口中显示数据库中的动态数据。

到目前为止我尝试过的：Twig文件，其中包含所有数据的列表：

 {% set count = '1' %} {% for entity in entities %}  {% set count = count + '1' %} {% endfor %} 
 
 
 
{{ knp_pagination_sortable(entities, '#', 'a.id') }}
 
 {{ knp_pagination_sortable(entities, 'Name', 'a.name') }}
 
Full Address
 
Action
 
 
 
 
{{ entity.id }}
 
{{ entity.name }}
 
{{ entity.address }}
 
 Edit {#Edit#} Delete 
 
  

用于动态ID传递的jQuery函数：

  function editDocument(){ $(document).on("click", ".open-editBox", function () { var editId = $(this).data('id'); $.ajax({ type: 'GET', url: editId+"/edit", //data: {"editId": editId}, success: function(response){ // alert($.get()); $('#editPlayerModel').html(response); } }); // alert(editId); //$(".modal-body #editId").val( editId ); }); } 

控制器function，用于编辑数据并呈现表单：

  /** * Displays a form to edit an existing Venue entity. * * @Route("/{id}/edit", name="venue_edit") * @Method("GET") * @Template() */ public function editAction($id) { //print_r($id); exit; $em = $this->getDoctrine()->getManager(); $entity = $em->getRepository('JplAdminFunctionBundle:Venue')->find($id); if (!$entity) { throw $this->createNotFoundException('Unable to find Venue entity.'); } $editForm = $this->createEditForm($entity); $deleteForm = $this->createDeleteForm($id); return array( 'entity' => $entity, 'edit_form' => $editForm->createView(), 'delete_form' => $deleteForm->createView(), ); } 

edit.html.twig文件包含编辑表单（我希望此表单显示在模式弹出窗口中）：

 {{ form(edit_form) }} 

单击EDIT按钮后，它甚至没有显示任何错误

注意：我使用了generate:doctrine:crud命令来执行CRUD操作

我知道我在流程或jQuery函数或控制器代码中的某个地方滞后，但无法识别确切的冲突。

帮帮我，谢谢

Answer 1

 Edit 

在上面的html结构中，你处理了onclick事件，如果你看到你的editDocument js函数，那么：

 function editDocument(){ $(document).on("click", ".open-editBox", function () { var editId = $(this).data('id'); $.ajax({ type: 'GET', url: editId+"/edit", //data: {"editId": editId}, success: function(response){ // alert($.get()); $('#editPlayerModel').html(response); } }); // alert(editId); //$(".modal-body #editId").val( editId ); }); } 

你有$(document).on('click'...这是不必要的。我建议使用上面的任何一个。从结构中删除onclick并删除你的函数包裹在$(document).on('click'...或更改您的function如下：

 Edit 

JS

 function editDocument(ctrl){ //pass this ctrl from html var editId = $(ctrl).data('id'); var res="";//store the obtained result var success=false; //open modal only if success=true //url should match your server function so I will assign url as below: var url="/editAction"; //this is the server function you are calling var data=JSON.stringify({"id":editId}); $.when( //To execute some other functionality once ajax call is done $.ajax({ type: 'GET', url: url, dataType:'json',//type of data you are returning from server data: data, //better to pass it with data success: function(response){ res=response; success=true; }, error:function(){ //handle error }, })).then(function(){ if(success) { //assign each values obtained from response which is now //stored in "res" inside modal element by mapping it to //necessary controls in modal $("yourmodalid").modal("show"); //show the modal } }); } 

或者，如果您使用$(document).on('click'....然后将其更改如下：

HTML

 Edit 

JS

 $(document).on("click", ".open-editBox", function () { var editId = $(this).data('id'); //get the id with this var res="";//store the obtained result var success=false; //open modal only if success=true //url should match your server function so I will assign url as below: var url="/editAction"; //this is the server function you are calling var data=JSON.stringify({"id":editId}); $.when( $.ajax({ //To execute some other functionality once ajax call is done type: 'GET', url: url, data: data, //better to pass it with data dataType:'json',//type of data you are returning from server success: function(response){ res=response; success=true; }, error:function(){ //handle error }, })).then(function(){ if(success) { //assign each values obtained from response which is now //stored in "res" inside modal element by mapping it to //necessary controls in modal $("yourmodalid").modal("show"); //show the modal } }); }); 

我觉得你不需要在锚内部按钮，你可以只使用类来锚定自己以获得按钮的感觉，如下所示：

 EDIT 

关注这一点。 如果您遇到任何问题，请告诉我

Answer 2

谢谢。 我已经采用了这些示例，对其进行了修改并且有效：

我参加了JS DoubleClick活动来展示模态

JS ：

 $(document).on("dblclick", ".opdia", function () { var editId = $(this).data('id'); var res = ""; var success = false; var url = "###route_to_controller###?id=" + editId; $.when( $.ajax({ type: 'GET', url: url, success: function(response){ res=response; success=true; }, error:function(){ //handle error }, })).then(function(){ if(success) { $("#myModal").html(res).modal("show"); } }); }); 

我有一个Twig模板显示一个表中的所有实体。 我宣布

用于控制模态。 HTML ：

 ... 
 

我的控制器 ：

 /** * @Route("/SomeUrl", name="###route_to_controller###") */ public function getDetailAction(Request $request) { $id = $request->query->get('id'); return $this->render('::YOURTWIGTEMPLATE.html.twig',array('id' => $id)); } 

和我的细节树枝模板：

 
 
 
 × 
Modal title - ID -> {{ id }}
 
 
 
 
 Close Save changes