如何在Symfony2中的Bootstrap Modal Popup中动态显示数据

Question

我想在Modal Popup中显示带有各自ID的信息的编辑表单。换句话说，我想在链接点击模式弹出窗口中显示来自数据库的动态数据。

是我迄今为止尝试：它拥有所有数据的列表 嫩枝文件：

<table class="table table-striped table-hover table-bordered" style="margin-top:30px;" > 
      <thead> 
      <tr> 
       <th>{{ knp_pagination_sortable(entities, '#', 'a.id') }}</th> 
       <th {% if entities.isSorted('a.name') %} class="sorted"{% endif %}> {{ knp_pagination_sortable(entities, 'Name', 'a.name') }}</th> 
       <th class="hidden-480">Full Address</th> 
       <th>Action</th> 
      </tr> 
      </thead> 
      <tbody> 
      {% set count = '1' %} 
      {% for entity in entities %} 
      <tr> 
       <td>{{ entity.id }}</td> 
       <td>{{ entity.name }}</td> 
       <td>{{ entity.address }}</td> 

       <td> 
        <a href="#" onclick="editDocument();" data-id="{{ entity.id }}" role="button" data-toggle="modal" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 
        {#<a href="{{ path('venue_edit', { 'id': entity.id }) }}">Edit</a>#} 
        <a href="#deleteModle" data-id="{{ entity.id }}" role="button" data-toggle="modal"><button type="button" class="btn blue">Delete</button></a> 

       </td> 

       {% set count = count + '1' %} 
       {% endfor %} 
      </tr> 



      </tbody> 
     </table> 

jQuery函数的动态ID通：

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); 
    }); 
} 

控制器功能对数据进行编辑并呈现如下格式：

/** 
* 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) }} 

点击编辑按钮后，会显示什么，甚至没有任何错误

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

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

帮助我，感谢名单

Answer 1

<a href="#" onclick="editDocument();" data-id="{{ entity.id }}" role="button" data-toggle="modal" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 

在上面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'...包裹或更改您的功能如下：

<a href="#" onclick="editDocument(this);" data-id="{{ entity.id }}" role="button" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 

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

<a href="#" data-id="{{ entity.id }}" role="button" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 

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 
       } 
    }); 
}); 

我觉得你并不需要内部锚按钮，你可以申请 类锚本身获得尽可能下面的按钮感觉：

<a href="#" data-id="{{ entity.id }}" role="button" class="open-editBox btn blue">EDIT</a> 

注意这一点。让我知道如果你面临任何问题

Answer 2

thx。我已经把这些例子，修改它和它的作品：

我采取了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"); 
         } 
        }); 
       }); 

我有一根树枝模板显示所有实体在一张桌子里。我宣布<tr>用于控制模态。 HTML：

<tr class="opdia" data-id="{{ entity.id }}" role="button">... 

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

而且我控制器：

/** 
* @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)); 
} 

我的详细信息嫩枝模板：

<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h4 class="modal-title" id="myModalLabel">Modal title - ID -> {{ id }}</h4> 
    </div> 
    <div class="modal-body"> 


    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> 
</div>